2

在使用Twitter Bootstrap 的 Affix 功能时，我可以设置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 侧边栏滚动到内容部分下方

4

1 回答 1

0

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

当您开始在顶部 290/210 像素和底部 270 像素之间滚动时（affix-top将被删除），affix该类将应用于您的列表 (ul)。 从 bootstrap.css 和docs.css.affix获取 （你必须定义这个！）.affix { position: fixed; } .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（你也必须定义它！）

于 2013-07-13T00:02:26.603 回答