javascript - 取决于页面位置的 CSS 类

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() 的文档