javascript - 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=""从顶部或底部的偏移量告诉浏览器何时切换导航的位置元素。 (注意:affix-top一般是position: static，词缀一般是position: fixed，而affix-bottom一般是position: absolute。)

正确定位

确保在您的 CSS 中设置“位置:_____；”以及每个状态的“top: __px”。 (可能，您只需要为 .affix 设置顶部，为 .affix-bottom 设置位置和底部，而为 .affix-top 设置任何内容。)

解决闪烁问题

如果您在滚动到 bototm 时遇到导航元素闪烁的问题(类在 .affix 和 .affix-bottom 之间快速切换)，那么您可能需要在父元素上设置 position:relative .我会推荐一个父级占据你的导航将“移动”的全部高度，这样你就可以为 .affix-bottom 设置 bottom: 0 或 bottom: [desired margin from bottom]。

用JS启动ScrollSpy

您已经启动了页面的附加部分。现在让我们启动 spyscroll。注意可以通过data属性或者js来启动spyscroll。让我们做js。

在上面的链接中，仅仅复制代码是危险的，因为“#”注释语法破坏了我的代码(将 # 切换为//并且一切正常)。

将它添加到你 body 的底部:

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

请注意使用 body 而不是文档中的 nav 元素。 super 重要。 请注意，我的目标是导航包装器而不是导航本身(如果以导航本身为目标，则 spy 将不起作用，而是始终突出显示导航中的底部 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>