Question

我是一个新手前锋，我有一个难以理解的问题。在我的页面上，当您单击顶部菜单中的链接时，它会向下滚动到所需的块。但是，除非用户向下滚动几个像素，否则链接不会标记为活动状态。为什么会发生这种情况，我该如何解决？这是html：

            <nav class="menu">
                <div class="nav-collapse">
                    <ul class="nav">
                     <li><a data-action="scrollTo" href="#content" class="hover">Download</a></li>
                     <li><a data-action="scrollTo" href="#productfeatures">Product Features</a></li>
                     <li><a data-action="scrollTo" href="#howitlooklike">How it look like</a></li>
                     <li><a data-action="scrollTo" href="#mobile">Mobile Version</a></li>
                     <li><a data-action="scrollTo" href="#footer">Contacts</a></li>     
                    </ul>
                </div>
            </nav><!-- Nav End-->

如果刷新页面并向上滚动 - 将显示一个活动链接。

您可以看到的所有代码here

Answer 1

如果您使用的是Bootstrap，为什么不使用它的'ScrollSpy'JS组件？

它易于使用，并允许从窗口顶部设置偏移，这是您的网站现在的根本问题。当您拥有固定导航时，它会根据顶部的位置激活。

您可以使用'ScrollSpy'并将偏移设置为略高于您的NAV元素高度。此外，每次激活新的导航链接时都会触发“激活”事件。所以这应该为你做的伎俩。

以下是链接：http://getbootstrap.com/javascript/#scrollspy

Bootstrap和scrollTo.js导航

1 个答案: