jquery - 使用 jQuery 滚动事件

Question

我有这个脚本：http: //jsfiddle.net/jP3yw/6/

我的代码：

HTML：

<div class="scroll">
    <p class="scroll_item" id="1"><a href="#">&nbsp;</a></p>
<p class="scroll_item" id="2"><a href="#">&nbsp;</a></p>
<p class="scroll_item" id="3"><a href="#">&nbsp;</a></p>
<p class="scroll_item" id="4"><a href="#">&nbsp;</a></p>
</div>

<div id="first"> <h1>First div!</h1></div>

<div id="second"> <h1>Second div! </h1></div>

<div id="third"> <h1>Third div!</h1></div>

<div id="fourth"> <h1>Fourth div!</h1> </div>

CSS：

.scroll{
    position:fixed;
    height:48%;
    right:4px;
    top:30%
}
a {
    text-decoration:none;
}

.scroll_item{
    margin-bottom:10px;
    width:10px;
    height:10px;
    border: 3px solid #000;
}
.scroll_item_active{
    width:10px;
    height:10px;
    border:3px solid #000;
    background-color: #000;
    margin-bottom: 10px;
}

jQuery：

$('#1').click(function () {
    scrollTo('#first');
}); 

$('#2').click(function () {
    scrollTo('#second');
}); 

$('#3').click(function () {
    scrollTo('#third');
}); 

$('#4').click(function () {
    scrollTo('#fourth');
}); 

 function scrollTo(selector, time, verticalOffset) {
        time = typeof(time) != 'undefined' ? time : 1000;
        verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
        element = $(selector);
        offset = element.offset();
        offsetTop = offset.top + verticalOffset;
        $('html, body').animate({
            scrollTop: offsetTop
        }, time);
    }

当您滚动到特定的 div 时，我想将类从 scroll_item 更改为 scroll_item_active，即使您使用浏览器的滚动条或滚动菜单也是如此。但我不知道该怎么做！有人可以帮帮我吗？

现场示例：http ://www.timotheecottier.fr/

Answer 1

您应该将此事件的处理程序绑定到带有滚动的元素上。然后，当触发时，您应该迭代考虑要检查它们是否可见并使用此问题中提供的功能的所有元素。