4

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

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

测试站点在这里：

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

scrollspy 引导元素似乎在滚动时效果很好。但是，一旦您单击某个区域，就会出现问题。通常它会转到错误的部分或在导航中突出显示错误的区域但在正确的部分。

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

从本质上讲，它一直有效，直到粘性导航生效，让它们一起工作的解决方案是什么？

4

2 回答 2

6

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

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

也很重要：

设置词缀

给导航元素一个 data-spy="affix", data-offset-top="", data-offset-bottom="" 其中从顶部或底部的偏移量告诉浏览器何时切换导航元素的位置。（注：affix-top 通常是 position:static，affix 通常是 position:fixed，affix-bottom 通常是 position:absolute。）

正确定位

确保在你的 CSS 中设置一个“位置：_____;” 以及这些状态中的每一个的“顶部：__px”。（可能你只需要为 .affix 设置一个顶部，为 .affix-bottom 设置位置和底部，而为 .affix-top 设置任何内容。）

解决闪烁问题

如果您在滚动到底部时遇到导航元素闪烁的问题（类在 .affix 和 .affix-bottom 之间快速切换），那么您可能需要在父元素上设置 position:relative。我会推荐一个占据你的导航将“旅行”的全部高度的父母，这样你就可以为 .affix-bottom 设置底部：0 或底部：[期望的底部边距]。

用 JS 启动 ScrollSpy

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

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

将此添加到您的身体底部：

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

请注意使用 body 而不是文档中的 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>

于 2013-08-20T03:50:09.007 回答
0

很好的答案和帖子对我有帮助。我刚刚在 Bootstrap 3 上完成了这一点，需要添加一些东西。

  1. 如果您不包含文档类型，您将无法获得正确的行为。无论如何，这是必不可少的最佳实践，但我在草稿项目中忽略了它，我看到“导航中的底部 li 将始终突出显示”影响。

Bootstrap 使用需要使用 HTML5 文档类型的某些 HTML 元素和 CSS 属性。将它包含在所有项目的开头。

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

http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins http://www.codingeverything.com/2014/02/BootstrapDocsSideBar.html

于 2016-02-19T04:45:53.053 回答