CSS 类取决于页面位置

Posted 2023-05-08

【中文标题】CSS 类取决于页面位置

【英文标题】：CSS class depending on page position

【发布时间】：2011-10-26 01:23:50

【问题描述】：

我在页面顶部有一个固定导航，其中包含通过 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>

非常感谢任何帮助。

【参考方案1】：

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

*查看offset()的文档

【讨论】：

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

【参考方案2】：

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

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

【参考方案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');

【参考方案4】：

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

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