Javascript 引导scrollspy和粘性导航不一起工作

混合两种元素会有点问题

我相信你以前见过这种技术。位于功能区下方的粘性导航条，当用户向下滚动时，该导航条会粘在页面顶部。当用户向下滚动页面时，导航栏会点亮相应的部分，用户也可以使用导航栏在各个部分之间跳转

测试地点如下：

scrollspy引导元素在滚动时似乎工作得很好。但是，一旦单击某个区域，问题就会出现。通常，它会进入错误的部分，或在导航中突出显示错误的区域，但位于正确的部分

有人知道怎么解决这个问题吗？我的猜测是，粘性导航可能会引起高度问题？使它看起来比导航卡住时短

---

从本质上讲，在粘性导航生效之前，它一直有效。如何让它们一起工作？

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

同样重要：

设置词缀

给导航元素一个data spy=“粘贴”，data offset top=“”，data offset bottom=“”，其中offset from top或bottom告诉浏览器何时切换导航元素的位置。 （注：粘贴顶部通常为位置：静态，粘贴通常为位置：固定，粘贴底部通常为位置：绝对。）

正确定位

确保在css中为这些状态中的每一个设置一个“position:uuuuuuuuuuuuuuuuuuuuuuuuu；”和“top:uuuupx”。（可能，您只需要为.affix设置顶部，为.affix-bottom设置位置和底部，而为.affix-top设置任何内容。）

解决闪烁问题

如果滚动到bototm时导航元素出现闪烁问题（类在.affix和.affix bottom之间快速切换），则可能需要在父元素上设置position:relative。我建议您选择一个占据导航将“移动”的全部高度的家长，这样您就可以设置底部：0或底部：[从底部所需的边距]。粘贴底部

使用JS启动ScrollSpy

您已启动页面的粘贴部分。现在，让我们启动spyscroll。请注意，您可以通过数据属性或js启动spyscroll。让我们做js

在上面的链接中，仅仅复制代码是危险的，因为“#”注释语法破坏了我的代码（将#切换到//并且所有操作都很好）

将此添加到身体底部：

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

//启动scrollspy on body以导航包装器为目标
jQuery（'body'）.scrollspy（{target:'#nav wrapper'}）；

注意使用body而不是像doc中那样的nav元素。非常重要。 请注意，我的目标是导航包装而不是导航本身（如果目标是导航本身，则间谍活动将不起作用，而导航中的底部li将始终高亮显示）

完成

这一切都是一场噩梦，希望它能帮助一些人

编辑：我的例子。 请注意，包装保持其宽度，这样固定导航就不会与其他内容重叠。（我必须给导航本身一个宽度，这样它在跳出导航包装时就不会改变大小）

在哪里

---

好的回答和帖子帮助了我。我刚刚在Bootstrap3上完成了这一部分，需要添加一些东西

如果不包含doctype，将无法获得正确的行为。 无论如何，这是最基本的最佳实践，但我在我的scratch项目中忽略了它，我看到了“导航中的底部li将始终突出显示”的影响 Bootstrap使用某些HTML元素和CSS属性，这些元素和属性需要使用HTML5 doctype。在所有项目的开始都包括它

一些很好的教程来补充文档

---

我唯一似乎无法锁定的问题是那个闪烁的问题。我尝试了您的解决方案，即将整行的父级设置为

位置：relative。这仍然不起作用。以下是我的工作示例：。
.affix
类和
.affix-bottom
类来回切换的速度非常快。注意：粘贴的导航将跳出包装器。因此，请确保导航本身具有您想要的所有品质（即宽度和背景处理）。我会确保A）您的导航和包装具有宽度属性（即包装上的span3类和给定的nav宽度）和B）样式属性（即well类）是导航的一部分及其子项，而不是包装。我现在已经在上面的答案中加入了我的例子。我一有机会就会回答你的flickr问题。嘿，我刚开始使用另一个插件：。下面是一个正在运行的示例：。它一直在为我工作。
<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>