Jquery 点在卷轴上变化

我有这个剧本：

HTML:

<div id="scroll">
<div id="1" class="scroll_item">&nbsp;</div>
<div id="2" class="scroll_item">&nbsp;</div>
<div id="3" class="scroll_item">&nbsp;</div>
<div id="4" class="scroll_item">&nbsp;</div>
</div>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>

我需要做的是，当我使用滚动条（而不是滚动点）滚动到第二个div时，第二个点将变为class

scroll\u item\u active

。我需要帮助才能做到这一点

---

我一直在尝试用scrollTop和set 800、1600等做一些事情，但它不起作用。有什么好主意吗？

我猜你在寻找更像这样的东西：

HTML

工作小提琴

试试这个我在你的小提琴上加了一些额外的东西，点击试试

代码

---

希望这有帮助，谢谢你查看这篇文章。你太棒了！非常感谢。如果看到至少100个像素的div，有没有办法更改类？我已经通过在每个

if

语句中添加-100来做到这一点。非常感谢。谢谢，在我的代码中使用了一些小的更正：添加/删除“scroll\u item\u active”类在click事件处理程序中不是必需的，因为它将由scroll事件处理程序完成。

<div id="scroll">
    <div data-page="first"  class="scroll_item">&nbsp;</div>
    <div data-page="second" class="scroll_item">&nbsp;</div>
    <div data-page="third"  class="scroll_item">&nbsp;</div>
    <div data-page="fourth" class="scroll_item">&nbsp;</div>
</div>

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>

$('.scroll_item').on('click', function() {
    var elem   = $('#' + $(this).data('page')),
        scroll = elem.offset().top;

    $('body, html').animate({scrollTop : scroll}, 1000);

    $(this).addClass('scroll_item_active')
           .siblings('.scroll_item_active')
           .removeClass('scroll_item_active');
});

$(window).on('scroll', function(e) {
    var elems    = $('#first, #second, #third, #fourth'),
        scrolled = $(this).scrollTop(),
        dataPage = elems.filter(function() {
            return $(this).offset().top + ($(this).height() / 2) >= scrolled;
        }).first();

    $('.scroll_item[data-page="'+dataPage.prop('id')+'"]')
              .addClass('scroll_item_active')
              .siblings('.scroll_item_active')
              .removeClass('scroll_item_active');
}).trigger('scroll');

$(document).ready(function () {
    $("#first").addClass('scroll_item_active');
    var main = main = $('#scroll');
    $('.scroll_item').click(function (event) {

        event.preventDefault();
        var trgt = $(this).attr('id') + "1";
        target_offset = $('#' + trgt).offset(),
        target_top = target_offset.top;
        $('html, body').animate({
            scrollTop: target_top
        }, 500);
        main.children().removeClass('scroll_item_active');

        $(this).addClass('scroll_item_active');

    });

    $(window).scroll(function (event) {
        if ($("#first1").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
            $("#first").addClass('scroll_item_active');
            $("#second").removeClass('scroll_item_active');
            $("#third").removeClass('scroll_item_active');
            $("#fourth").removeClass('scroll_item_active');
        }
        if ($("#second1").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
            $("#second").addClass('scroll_item_active');
            $("#first").removeClass('scroll_item_active');
            $("#third").removeClass('scroll_item_active');
            $("#fourth").removeClass('scroll_item_active');

        }
        if ($("#third1").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
            $("#third").addClass('scroll_item_active');
           $("#first").removeClass('scroll_item_active');
            $("#second").removeClass('scroll_item_active');
            $("#fourth").removeClass('scroll_item_active');
        }
         if ($("#fourth1").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
            $("#fourth").addClass('scroll_item_active');
           $("#first").removeClass('scroll_item_active');
            $("#second").removeClass('scroll_item_active');
            $("#third").removeClass('scroll_item_active');
        }
    });
});

<div id="scroll">
    <div id="first" class="scroll_item">&nbsp;</div>
    <div id="second" class="scroll_item">&nbsp;</div>
    <div id="third" class="scroll_item">&nbsp;</div>
    <div id="fourth" class="scroll_item">&nbsp;</div>
</div>
<div id="first1"></div>
<div id="second1"></div>
<div id="third1"></div>
<div id="fourth1"></div>

*{
    margin: 0px;
    padding: 0px;
}
#scroll {
    position: fixed;
    top: 50%;
    right: 30px;
    z-index: 999;
}
.scroll_item {
    border: 3px solid #FFF;
    width: 10px;
    height: 10px;
    margin: 5px;
}
.scroll_item:hover{
    background: #FFF;
}
.scroll_item_active {
    border: 3px solid #FFF;
    width: 10px;
    height: 10px;
    margin: 5px;
    background-color: #FFF;
}

#first1{
    width: 100%;
    height: 800px;
    background-color: red;
    top: 0px;
}
#second1 {
    width: 100%;
    height: 800px;
    background-color: green;
    position: absolute;
    top: 800px;
}
#third1{
    width: 100%;
    height: 800px;
    background-color: blue;
    position: absolute;
    top: 1600px;
}
#fourth1 {
    width: 100%;
    height: 800px;
    background-color: black;
    position: absolute;
    top: 2400px;
}