Question

我有一个像这样的页面：

<nav style="position:fixed;top=0;left=0;width:100px;">
  <a class="one" href="#one">One</a>
  <a class="two" href="#two">Two</a>
  <a class="three" href="#three">Three</a>
  <a class="four" href="#four">Four</a>
  <a class="five" href="#Five">Five</a>
</nav>
<section style="margin-left:120px;height:550px;">
  <a name="one" id="one"></a>
  Content of section one ...
</section>
<section style="margin-left:120px;height:350px;">
  <a name="two" id="two"></a>
  Content of section two ...
</section>
<section style="margin-left:120px;height:750px;">
  <a name="three" id="three"></a>
  Content of section three ...
</section>
<section style="margin-left:120px;height:450px;">
  <a name="four" id="four"></a>
  Content of section four ...
</section>
<section style="margin-left:120px;height:250px;">
  <a name="five" id="five"></a>
  Content of section five ...
</section>

导航始终可见，当用户单击链接时，它在jquery中获得.active类。但是当用户滚动到某个页面时，我想根据当前位于可见窗口顶部的部分来更改.active链接。
我尝试使用$（window）.scroll（）和$（link.hash）.offset（）。top，但说实话我不知道如何管理它才能正常工作。

Answer 1

您可以使用jquery的：visible选择器，请参阅此示例;

$("section:visible").filter(":last-child").addClass("active");

Answer 2

漂亮的插件可以解决问题：http://imakewebthings.github.com/jquery-waypoints/

如何使用jquery识别页面滚动到哪个部分？

2 个答案: