Question

使用Twitter Bootstrap's Affix feature时，我可以从页面顶部设置offset，这样一旦用户滚动过去 offset点，侧边栏将与用户一起向下滚动页面。

在某些页面上，一旦用户滚动到页面底部，我的词缀侧边栏就会滚动到页面的内容部分之外，进入页面的sub-footer和footer，如图所示下方。

问题：如何防止粘贴项目浮动低于我的内容部分（此处显示的是上一个FAQ手风琴）？

更新（已添加代码）

<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 sidebar scrolled below content section

Answer 1

更新当底部偏移下的滚动区域的高度大于附加的元素高度时，计算出错。将元素设置为由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)

加载页面时不要滚动affix ul类已更改为affix-top。列表不必改变位置没有为affix-top定义的css规则。

当您从顶部开始在290 / 210px之间滚动时，从270px开始滚动底部（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）。来自docs.css的.bs-docs-sidenav.affix-bottom { bottom: 270px; position: absolute; top: auto; }（你也必须定义它！）

防止Twitter Bootstrap Affix滚动到点以外

1 个答案: