Javascript CSS类取决于页面位置

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

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

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

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

编辑：这里有一个链接，指向我正在寻找的东西：

图标根据您在页面上的位置而变化

脚本：

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

函数goToByScroll（id）{
$（'html，body'）.animate（{scrollTop:$（“#”+id）.offset（）.top-50}，'500'）；
}

HTML:

[...]
[...]

---

非常感谢您的帮助。

这可以通过检查所需元素的

offset（）

*函数，然后编码以作出相应响应来实现。可以跟踪图元的偏移量，并根据生成的偏移量相应地应用或删除相应的类

---

*参见文档中的检查所需元素的

offset（）

*功能，然后编码以做出相应响应，就可以实现这一点。可以跟踪图元的偏移量，并根据生成的偏移量相应地应用或删除相应的类

---

*单击导航中的某个部分时，只需修改类，使其成为您想要的样式，即可参见文档

---

其次，您需要在

滚动

事件上添加一个事件处理程序，该事件类似地修改导航的类。

当您单击导航中的某个部分时，只需修改该类，使其成为您想要的样式

其次，您需要在

滚动

事件上添加一个事件处理程序，该事件类似地修改nav的类。

尝试以下操作：

function goToByScroll(id){

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

}

试试这个：

function goToByScroll(id){

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

}

---

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

---

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

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

---

查看Bootstrap的插件，该插件“用于根据滚动位置自动更新导航目标”。有关使用ScrollSpy插件的示例，请参阅如何制作浮动、更新导航栏（如Bootstrap网站所用）。

谢谢。。。我可以看出这是可行的，但我对javascript不是很了解。我在文档中没有看到如何根据偏移量应用类/删除类的示例；只得到补偿。谢谢。。。我可以看出这是可行的，但我对javascript不是很了解。我在文档中没有看到如何根据偏移量应用类/删除类的示例；只得到偏移量。