来自Docu

Question

我已经在一个页面上创建了一个网站。我有一个固定的标题/导航栏，其链接向下滚动到不同的部分。我正在寻找一种方法来通过在适当的链接中添加.selected类来更改其所在部分的链接的样式，但我不知道如何让jQuery识别哪个部分当前显示在屏幕上。

我找到了一个名为espy（https://github.com/Darsain/espy）的插件，我觉得这很有用，但是对我来说有点太高级了。有更简单的方法吗？

我在开发方面很陌生，所以我希望我已经明确了我在寻找什么。

Answer 1

查看this plugin（jQuery的视口选择器）。

它添加了可用于匹配某些元素的伪选择器。这些是：

$(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")

您需要:below-the-fold和:above-the-top。

Answer 2

此插件应该告诉您元素是否在视口中。

使用Waypoint的最简单方法是调用.waypoint并传入一个函数。

$('#example-basic').waypoint(function() {
  notify('Basic example callback triggered.');
});

此示例会在#example-basic的顶部点击视口顶部时发出通知。当您通过此点向上滚动和向下滚动时，回调会触发。

Answer 3

这是youtube上的视差教程：

我发现通过视频学习复杂技术使我更容易掌握。

此外，我在这里发现这篇文章可能会为这个主题带来更多启示：

希望它能为您提供一些见解。