Bootstrap滚动监听和固定导航栏无法同时使用

Question

Bootstrap滚动监听和固定导航栏无法同时使用

javascripttwitter-bootstrapscrollspy

5

在混合两个元素时，我遇到了一些问题！

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

测试网站在这里：

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

滚动监听bootstrap元素在滚动时似乎工作正常。但是，一旦点击某个区域，问题就出现了。通常会跳转到错误的部分或在导航中突出显示错误的区域，但在正确的部分中。

有人知道如何解决这个问题吗？我猜测，粘性导航可能会导致问题，也许与高度有关？当导航固定时，使它似乎比实际上短吗？

基本上，在粘性导航生效之前它可以工作，如何解决使它们共同工作的问题？

- user2586473

2个回答

0

非常感谢您的回答和帖子，对我很有帮助。以下是我在Bootstrap 3上刚刚解决的一些问题。

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

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

一些好的教程可以补充文档。

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

- radlab

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SweetTomato · Accepted Answer

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

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

设置 Affix

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

正确设置位置

确保在 CSS 中为每个状态设置 "position: _____;" 和 "top: __px"。（可能只需要为 .affix 设置 top，为 .affix-bottom 设置 position 和 bottom，对于 .affix-top 不需要设置任何东西。）

解决闪烁问题

如果您在滚动到底部时遇到导航元素闪烁的问题（类在 .affix 和 .affix-bottom 之间快速切换），那么您可能需要在父元素上设置 position:relative。我建议在占用您的导航将“行进”的全部高度的父元素上设置，这样您可以为 .affix-bottom 设置 bottom: 0 或 bottom: [所需的底部边距]。

使用 JS 启动 ScrollSpy

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

在上面的链接中，只复制代码是危险的，因为 "#" 注释语法会破坏我的代码（将 # 改为 //，一切都能正常工作）。

将以下内容添加到 body 的底部：

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

请注意，在文档中使用body而不是nav元素。非常重要。请注意，我正在针对nav包装器而不是nav本身进行定位（如果定位到nav本身，则窥探将无法正常工作，而是始终会突出显示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>