取决于页面位置的CSS类

我在页面顶部有一个固定的导航链接，它可以通过jQuery平滑地滚动到页面的不同部分（ID）。取决于页面位置的CSS类

是否有任何可能的方式来将CSS类（例如.current）附加到导航链接，具体取决于您所处页面的哪一部分？

例如，当我点击“关于”时，它会向下滚动到“关于”部分，并且只要您停留在该部分中，导航文本就会变成橙色。

我以前在某个地方看过这个工作，但我不记得网站，甚至不知道如何描述这种行为来搜索它。

编辑：这里有一个链接到一些siliar什么我在寻找： http://www.fat-man-collective.com/hello.php

的图标取决于你的页面上的位置发生变化。

脚本：

<script> 
    function goToByScroll(id){ 
    $('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500'); 
    } 
</script>

HTML：

<a href="javascript:void(0)" onClick="goToByScroll('about')">About</a> 

[...] 

<div id="about"> 
    [...] 
</div>

任何帮助是极大的赞赏。

来源

2011-08-12 Grefcs

这可以通过检查所需元素的offset() *函数，然后编码来做出相应的响应。您可以跟踪元素的偏移量，并根据生成的偏移量，相应地应用或删除相应的类。

*请参阅offset()

来源

2011-08-12 18:30:33 RobB

谢谢......我可以看到这个工作，但我不是很了解JavaScript。我没有在文档中看到如何根据偏移量应用类/删除类的示例;只获得抵消。 – Grefcs

文档当你点击在导航部分，只需修改类，以便风格，你希望它是什么。

其次，您需要在scroll事件中添加一个类似修改导航类的事件处理程序。

来源

2011-08-12 18:32:38 FishBasketGordo

试试这个：

function goToByScroll(id){ 

    $('ul#nav li a').removeClass('active'); // elements in menu 
    $(this).addClass('active'); 
    $('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500'); 

}

来源

2011-08-12 18:32:55 Sparkup

四年后...对于那些有相同的问题，因为有希望的OP已经解决了，现在他的问题。

检出Bootstrap的ScrollSpy插件，该插件“用于根据滚动位置自动更新导航目标。”有关如何使用ScrollSpy插件的示例，请参阅this detailed tutorial关于如何制作浮动的更新导航栏（如Bootstrap站点使用）。

来源

2015-06-16 14:56:56 Paul

取决于页面位置的CSS类

回答

相关问题