添加/删除滚动类

Question

如果题目不够具体我很抱歉..。但我真的不知道我的目标是什么.

以下是小提琴的基本内容

<style>
body { margin: 0; text-align: center; }
ul { margin: 0; padding: 0; list-style: none; position: fixed; top: 0; width: 100%; display: flex; }
li { flex: 1; padding: 10px; border-bottom: 1px solid black; background: #fff; }
.current { background-color: #eee; }
#content { margin-top: 50px; }
#content > div { padding: 500px 15px; }
#content > div + div { border-top: 1px solid black; }
</style>

<ul id="nav">
  <li id="nav-1" class="current">No.1</li>
  <li id="nav-2">No.2</li>
  <li id="nav-3">No.3</li>
  <li id="nav-4">No.4</li>
  <li id="nav-5">No.5</li>
</ul>

<div id="content">
  <div id="content-1">#01: “First Chapter”</div>
  <div id="content-2">#02: “Second Chapter”</div>
  <div id="content-3">#03: “Third Chapter”</div>
  <div id="content-4">#04: “Fourth Chapter”</div>
  <div id="content-5">#05: “Fifth Chapter”</div>
</div>

• 当viewport的顶部没有传递#content-2时，#nav-1将具有“当前”类。
• 当视口传递#content-2时，#nav-1将失去“当前”类，#nav-2将得到“当前”类。
• 诸若此类。

我看到的一些使用这种特性的站点都使用特定的脚本，当内容/nav中的对象上的数量发生变化时，需要对javascript做一些小的更改。

我希望知道一个脚本，它可以处理内容/导航中的动态对象数。

有人能教我怎么做吗？

谢谢。

Answer 1

这应该是你要找的：

Javascript

$(document).ready(function(){
  $(window).scroll(function(e){    
        for (var i = 1; i < $('#nav li').length; i++) {
            if($(window).scrollTop() > $('#content-'+i).position().top){
                $('#nav li').removeClass('current');
                $('#nav-'+i).addClass('current');
            } 
        };        
    })   
});

http://jsfiddle.net/f7fg9t6e/1/

不要忘记将jQuery添加到项目中;)