0

私はこのスクリプトを持っています: 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/

4

1 に答える 1

0

このイベントのハンドラーをスクロール付きの要素にバインドする必要があります。そして、トリガーされたら、それらが表示されているかどうかを確認し、この質問で提供されている機能を使用するかどうかを確認したいすべての要素を繰り返し検討する必要があります。

于 2013-08-05T13:39:01.430 に答える