Question

我的代码：

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

您应该使用scroll绑定元素上this事件的处理程序。然后在触发时你应该迭代思考你想检查它们是否可见的所有元素并使用this question中提供的函数。

使用jQuery滚动事件

1 个答案: