Question

我在页面顶部有一个固定导航，其中包含可以通过jQuery平滑地滚动到页面的不同部分（ID）的链接。

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

例如，当我点击“关于”时，它会向下滚动到“关于”部分，并且只要您留在该部分，也会将导航文本设为橙色？

我已经在不久前的某个地方看到过这种情况，但我不记得该网站甚至如何描述这种行为来搜索它。

编辑：这是我正在寻找的东西的链接： 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>

非常感谢任何帮助。

Answer 1

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

*请参阅offset()

的文档

Answer 2

当您单击导航中的某个部分时，只需修改该类，以便样式符合您的要求。

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

Answer 3

试试这个：

function goToByScroll(id){

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

}

Answer 4

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

查看Bootstrap的ScrollSpy插件，该插件“用于根据滚动位置自动更新导航目标。”有关使用ScrollSpy插件的示例，请参阅this detailed tutorial，了解如何进行浮动，更新导航栏（如Bootstrap网站使用）。

CSS类取决于页面位置

4 个答案: