Twitter BootStrap Scrollspy Bug 仍然存在...？答案

【问题标题】：Twitter BootStrap Scrollspy Bug still persistant...?Twitter BootStrap Scrollspy Bug 仍然存在...？
【发布时间】：2012-09-10 07:00:36
【问题描述】：

阅读 github 文档，错误是众所周知的，它被认为已在 2.1 中修复。但它没有？

基本上...您可以偏移 scrollspy 使用的数据，但是该偏移不会影响选项卡的实际点击。

对找到解决方案有帮助吗？

这是我要修复的网站：www.powerliftingbasics.com

【问题讨论】：

标签： css ruby-on-rails-3 jquery-plugins twitter-bootstrap

【解决方案1】：

根据@fat 对Issue #3316: Scrollspy Bugs的评论：

$('.navbar').scrollspy({offest: 70}); 仅用于修改滚动计算 - 我们不会改变实际的锚点点击内容，那是你的。该插件仅用于监视卷轴。

也就是说，ScrollSpy 只是观察，它不控制浏览器滚动。

Twitter Bootstrap 页面通过在链接到的部分上使用 padding-top: 30px 来解决这个问题。否则你可以用 JS 来处理它：

function adjustScrollForNavbar() {
  var $nav = $('div.navbar')
  if ( $nav.css('position') !== "fixed" ) return
  window.scrollBy(0, -$nav.height())
}

// Adjust for fixed navbar
$('body').on('click.scroll-adjust', '[href^="#"]', function (e) {
  if ( e && e.isDefaultPrevented() ) return
  $(window).one('scroll', adjustScrollForNavbar )
});

显然，CSS 修复会更可取。

【讨论】：

CSS 修复很糟糕。填充让网站看起来很糟糕......如果你只想滚动，它的内容是空的，然后是标题。
明白。它在 Bootstrap 站点上工作的原因是填充部分的背景与整个页面背景相对应。所以，所有的东西都只是空白，看起来就像是间距很好的排版。 CSS 填充不是类似补丁的修复，它是您需要计划到布局中的东西。您可能会考虑将页内导航锚定到没有不同背景颜色的元素。