Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » bootstrap affix при изменении размера, изменить отступ

Страниц (1): [1]
 

1. 3d_killer - 18 Января, 2017 - 22:51:33 - перейти к сообщению
Пытаюсь как то изменить отступ, сейчас дизайн вида:

-------------Шапка--------------
-------Движущаяся часть-----

запускаю так:
CODE (javascript):
скопировать код в буфер обмена
  1. $("#MoveTop").affix({offset: {top: 100}});


при изменении разрешения до мобильников шапка исчезает, как сделать чтобы при исчезновении шапки отступ стал нуленой, иначе контент лезет вверх, так как движущая часть имеет абсолютную позицию и некоторый отступ.

возможно что-то придумать?
(Добавление)
вроде придумал как
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(window).resize(function(){$("#MoveTop").affix({offset: {top: $("#Header").height();}});});

(Добавление)
не что-то не так работает как то странно
2. armancho7777777 - 19 Января, 2017 - 00:01:18 - перейти к сообщению
CODE (css):
скопировать код в буфер обмена
  1. @media (max-width: 720px) {
  2.      .elem { top: ... }
  3. }
?
3. 3d_killer - 19 Января, 2017 - 08:21:16 - перейти к сообщению
не помогает affix его держит на уровне
CODE (javascript):
скопировать код в буфер обмена
  1. $("#MoveTop").affix({offset: {top: 100}});
4. armancho7777777 - 19 Января, 2017 - 14:03:15 - перейти к сообщению
Честно говоря, я не пойму что Вам надо.
Где пример?
5. 3d_killer - 19 Января, 2017 - 15:20:01 - перейти к сообщению
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <header>
  3.         <div class="container hidden-xs hidden-sm" id="Header">
  4.         <div class="row">
  5.             <div class="col-md-2"><a href="/" title="На главную"><div id="Logo"></div></a></div>
  6.             <div class="col-md-7 col-lg-8" id="TopMenu">
  7. Меню
  8. </div>
  9.             <div class="col-md-3 col-lg-2" id="TopPhone">
  10.                666
  11.             </div>
  12.         </div>
  13.     </div>
  14.     <div class="container-fluid" id="MoveTop">
  15.         <div class="container">
  16.             <div class="row">
  17.                 <div class="col-xs-4" id="MoveMenu"></div>
  18.                         <div class="col-xs-4">
  19.                         <form role="form" id="FormSearch" class="form-inline">
  20.                                                 <div class="input-group">
  21.                                                                 <input type="text" class="form-control">
  22.                                                                 <span class="input-group-btn">
  23.                                                                         <button class="btn btn-default" type="button">
  24.                                         <span class="glyphicon glyphicon-search"></span>
  25.                                     </button>
  26.                                                                 </span>
  27.                                                         </div>
  28.                                                 </form>
  29.                     </div>
  30.                     <div class="col-xs-2">
  31.                         <span class="glyphicon glyphicon-shopping-cart">1</span>
  32.                     </div>
  33.                     <div class="col-xs-2">
  34.                         <span class="glyphicon glyphicon-shopping-cart">1</span>
  35.                     </div>
  36.                 </div>
  37.             </div>
  38.         </div>
  39. </header>
  40.  


CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).ready(function() { 
  3. $("#MoveTop").affix({offset: {top: 100}});
  4. });
  5.  
6. 3d_killer - 19 Января, 2017 - 21:44:27 - перейти к сообщению
а извиняюсь сам накосячил все работает как надо
(Добавление)
CODE (javascript):
скопировать код в буфер обмена
  1. $("#MoveTop").affix({offset: {top: $("#Header").height()}});

 

Powered by ExBB FM 1.0 RC1