3

リンクをクリックすると、ページがリスト内の対応するアイテムまでスクロールダウンし、アイテムに到達するとリンクのクラスが変更されるようにナビを設定しました。

<nav> 
<a href="#one" class="anchorLink">one</a> 
<a href="#two" class="anchorLink">two</a> </nav>


 <ul>
  <li id="one"></li>
  <li id="two"></li> 
 </ul>

これはかなり粗い例です

http://jsfiddle.net/FSk5Q/1/

また、アイテムに到達したら背景色を変更し（できれば新しい色にフェードします）、別のアイテムがスクロールされたときに元のクラスを復元​​し、次のアイテムのクラスを変更したいと思います。

クリックしてスクロールしたときにこれが発生する必要があるため、 :target オプションは実際には理想的ではありません。

アドバイスありがとうございます。js部門ではあまり良くありません。

4

2 に答える 2

0

Explosion Pillsのものをベースに修正版を作りました。それがあなたが望んでいたものであることを願っています。

$(document).on('scroll', function ()
{
    $("nav a").removeClass('highlight'); // reset all menu items
    temp = $();
    $("li").each(function (i) // for each content blcok (you schould give them a class)
    { 
        if ($(this).offset().top <= $(document).scrollTop()) // if it's position is above/at the page top
        {
            temp = $("nav a:nth-child("+(i+1)+")");
        }
    });
    temp.addClass('highlight');
});

http://jsfiddle.net/maxmeuten/FSk5Q/8/

于 2013-03-05T17:58:56.200 に答える
0

うまくいけば、これで少なくとも始めることができます。私が行ったことは、オフセットの上部がドキュメントのスクロールの上部よりも小さいことを確認することです (X ピクセル数内にある場合は、次のようにすることもできます)。

退色は CSS3 トランジションで行うことができます。

$(document).on('scroll', function () {
    $("li").each(function () {
        if ($(this).offset().top <= $(document).scrollTop()) {
            $("li").removeClass('highlight');
            $(this).addClass('highlight');
        }
        else {
            $(this).removeClass('highlight');
        }
    });
});

http://jsfiddle.net/FSk5Q/6/

于 2013-03-05T17:22:59.630 に答える