3

私はこのスクリプトを持っています: http://jsfiddle.net/8cj7C/

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>

私がする必要があるのは、たとえば、スクロールバー (スクロールドットではなく) を使用して 2 番目の div にスクロールすると、2 番目のドットが class に変更されることscroll_item_activeです。これを行うには助けが必要です！

scrollTop を使って 800、1600 などを設定しようとしましたが、うまくいきません。何か良いアイデアはありますか？

4

2 に答える 2

4

私はあなたがこのようなものをもっと探していると思います:

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');

フィドル

于 2013-08-25T16:15:56.140 に答える
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;
}

これが役に立てば幸いです、ありがとう

于 2013-08-25T16:44:03.503 に答える