Bootstrap scrollspy和粘性导航不能一起工作

Question

这里混合两个元素有点问题!

我相信你以前见过这种技术.位于功能区域下方的粘性导航栏,当用户向下滚动时会粘到页面顶部.当用户向下滚动页面时,导航栏会点亮相应的部分,用户也可以使用导航栏跳转部分.

测试网站在这里:

http://www.domaincreative.co.uk/dev/midasflo-test2

scrollspy bootstrap元素似乎在滚动时运行良好.但是,一旦单击某个区域,就会出现问题.通常它会转到错误的部分或突出显示导航中的错误区域,但在右侧部分.

有谁知道可以做些什么来解决这个问题？我的猜测是,粘性导航可能导致高度问题？使它看起来比导航器坚持时更短？

基本上它一直有效,直到粘性导航生效,让它们两者一起工作的解决方案是什么？

Answer 1

帮助我解决一些问题的链接:

http://mtjhax.wordpress.com/2013/02/11/twitter-bootstraps-scrollspy-plugin-needs-better-docs/

同样重要的是

设置词缀

为nav元素提供data-spy ="affix",data-offset-top ="",data-offset-bottom ="",其中从顶部或底部的偏移告诉浏览器何时切换nav元素的定位.(注意:词缀顶部通常是位置:静态,词缀通常是位置:固定,而词缀底部通常是位置:绝对.)

获得正确的定位

确保在你的CSS中设置"位置:_____;" 以及每个状态的"top:__ px".(可能你只需要为.affix底部设置一个顶部.affix底部的位置和底部,而对于.affix-top没有任何设置.)

解决闪烁问题

如果你在滚动到bototm(类在.affix和.affix-bottom之间快速切换)时遇到了导航元素闪烁的问题,那么你可能需要在父元素上设置position:relative.我建议父母占用你的导航将"旅行"的全部高度,这样你可以设置底部:0或底部:[底部所需的边距]为.affix-bottom.

用JS启动ScrollSpy

您已经启动了页面的词缀部分.现在让我们启动spyscroll.请注意,您可以通过数据属性或通过js启动spyscroll.我们来做js.

在上面的链接中,只是复制代码是危险的,因为"#"注释语法破坏了我的代码(Switched#to //并且一切运行良好).

将其添加到您的身体底部:

<script>
   // initiates scrollspy on body targeting the nav wrapper
   jQuery('body').scrollspy({ target: '#nav-wrapper' });
</script>

请注意使用body而不是doc中的nav元素.超级重要.请注意,我的目标是导航包装,而不是导航本身(如果定位导航本身,间谍将无法工作,而导航中的底部li将始终突出显示)

完成

这一切都是发现的噩梦,所以希望它可以帮到某个人.

编辑:我的例子.请注意,包装器保持其宽度,因此固定导航不会与其他内容重叠.(我必须给导航本身一个宽度,这样当跳出导航包装时它不会改变大小).

<ul class="nav nav-list affix" data-spy="affix" data-offset-top="585" data-offset-bottom="425" id="prepare-navigation">
  <li class="nav-header">Where?</li>
  <li class="divider"></li>
  <li><a href="#at-the-museum-day-time">When?</a></li>
  <li class="divider"></li>
  <li><a href="#at-the-museum-overnight">Why?</a></li>
  <li class="divider"></li>
  <li><a href="#around-the-region">How?</a></li>
  <li class="divider"></li>
  <li><a href="#at-your-school-location">Etc?</a></li>
  <li class="divider"></li>
</ul>