防止 Twitter Bootstrap Affix 滚动超出点答案

【问题标题】：Prevent Twitter Bootstrap Affix from scrolling beyond point防止 Twitter Bootstrap Affix 滚动超出点
【发布时间】：2013-07-12 15:14:02
【问题描述】：

当使用Twitter Bootstrap's Affix feature时，我可以从页面顶部设置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>

【问题讨论】：

Unpin Twitter bootstrap's affix on scroll的可能重复

标签： twitter-bootstrap scroll affix

【解决方案1】：

更新当底部偏移下的滚动区域的高度大于附加元素的高度时，计算会出错。将元素设置为 affix-bottom 设置的绝对位置后，此位置将用于下一次计算。因此，当向下滚动时，您的课程会一次又一次地从 affix 变为 affix-bottom。

试试这个修复：

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)

当您加载页面并且不滚动ul 的affix 类时改为affix-top。列表不必改变位置，所以那里没有为 affix-top 定义 css 规则。

当您开始在距离顶部 290/210 像素和距离 270 像素之间滚动时底部（affix-top 将被删除）affix 类被应用到您的列表 (ul)。 .affix 从 bootstrap.css 中获取 .affix { position: fixed; }，从 docs.css 中获取 .bs-docs-sidenav.affix { top: 40px; }（你必须定义这个！）

当您从底部滚动到 270px 下时，affix 类是改为affix-bottom。所以应用了affix-bottom 类到您的列表 (ul)。 .bs-docs-sidenav.affix-bottom { bottom: 270px; position: absolute; top: auto; } 来自 docs.css（您也必须定义它！）

【讨论】：

当我在我的页面上滚动时，affix-bottom 类永远不会被应用。这是什么原因？
看来您还必须为您的 affix-bottom 设置 data-offset-bottom