Предотвратить прокрутку Twitter Bootstrap Affix за пределы точки

При использовании функции добавления Twitter Bootstrap я могу установить offset сверху страницы, так что когда пользователь прокручивает мимо точки offset, боковая панель будет прокручиваться вместе с пользователем вниз по странице.

На некоторых страницах, когда пользователь прокручивает страницу вниз, боковая панель моего аффикса прокручивается за пределы раздела содержимого страницы в мои sub-footer и footer страницы, как показано на изображении ниже.

ВОПРОС: Как я могу предотвратить размещение прикрепленного элемента ниже моего раздела контента (показанного здесь последним аккордеоном часто задаваемых вопросов)?

ОБНОВЛЕНИЕ (добавлен код)

<body data-target="#more-questions" data-spy="scroll" data-offset="125">
  <!-- ... more code ... -->
    <div class="row" data-spy="affix" data-offset-top="1">
      <div class="span3" id="more-questions">
        <div class="content-bubble drop-shadow curved">
          <h3 class="uppercase"><i>Do You Still Have <strong>Questions?</strong></i></h3>
          <a href="contact-us.php" class="btn btn-prime">CONTACT US</a> </div>
        <div class="content-bubble-triangle"></div>
      </div>
    </div>
  <!-- ... more code ... -->
</body>

Twitter Bootstrap Affix, боковая панель прокручивается ниже раздела контента


scroll twitter-bootstrap affix
person adamdehaven    schedule 12.07.2013    source источник
comment
возможный дубликат Открепить аффикс начальной загрузки Twitter при прокрутке   -  person Bass Jobsen    schedule 13.07.2013

Ответы (1)


arrow_upward
0
arrow_downward

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

Попробуйте это исправление:

var tmp = $.fn.affix.Constructor.prototype.checkPosition;
$.fn.affix.Constructor.prototype.checkPosition = function () {
  if(($(document).height()-this.$window.scrollTop())<this.options.offset.bottom && this.$element.hasClass('affix-bottom')) return;
  tmp.call(this);
  }

см.: http://plnkr.co/voYMKdQP75XnalDeHUTB

Может быть, у вас неправильные настройки css? Посмотрите на меню по адресу: http://twitter.github.io/bootstrap/javascript.html получилось: <ul class="nav nav-list bs-docs-sidenav affix">

Аффикс устанавливается javascript:

// side bar
setTimeout(function () {
  $('.bs-docs-sidenav').affix({
    offset: {
      top: function () { return $window.width() <= 980 ? 290 : 210 }
    , bottom: 270 
    }
  })
}, 100)

Когда вы загружаете страницу и не прокручиваете, класс affix ul изменяется на affix-top. Список не должен менять положение, поэтому для affix-top не определено правило css.

Когда вы начинаете прокручивать между 290/210px сверху и 270px снизу (affix-top будет удалено), класс affix применяется к вашему списку (ul). .affix получает .affix { position: fixed; } из bootstrap.css и .bs-docs-sidenav.affix { top: 40px; } из docs.css (вы должны определить это!)

Когда вы прокручиваете ниже 270 пикселей снизу, класс affix изменяется на affix-bottom. Таким образом, к вашему списку (ul) применяется класс affix-bottom. .bs-docs-sidenav.affix-bottom { bottom: 270px; position: absolute; top: auto; } из docs.css (это тоже нужно определить!)

person Bass Jobsen    schedule 13.07.2013
comment
Когда я прокручиваю свою страницу, появляется, что класс affix-bottom никогда не применяется. В чем причина этого? - person adamdehaven; 15.07.2013
comment
кажется, вам также нужно установить смещение данных внизу для вашего аффикса внизу - person Bass Jobsen; 20.07.2013