Question

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时，第二个点将更改为类scroll_item_active。我需要帮助才能做到这一点！

我一直在尝试使用scrollTop做一些事情并设置800,1600等，但它不起作用。有什么好主意吗？

Answer 1

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

HTML

<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>

JS

$('.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');

FIDDLE

Answer 2

工作小提琴 DEMO

试试这个我添加了一些额外的东西，点击并尝试

码

$(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');
        }
    });
});

HTML

<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>

CSS

*{
    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;
}

希望这有帮助，谢谢

滚动时圆点变化

2 个答案:

码

HTML

CSS