2

メニューがあります：

  <ul class="menu-bottom">
  <li id="m1" class="active"><a id="1" href="#"><span>Link 1</span></a></li>
   <li id="m2"><a id="2" href="#"><span>Link 2</span></a></li>
   <li id="m3"><a id="3" href="#"><span>Link 3</span></a></li>
</ul>

ブラウザーのスクローラーの位置に応じて、「アクティブな」クラスが正しい< li >要素になるようにします。

これは私がそれを見る方法です：

     if ($(document).height() == 500) {
$('#m1').parent().addClass('active').
siblings().removeClass('active');
}

     if ($(document).height() == 1000) {
$('#m2').parent().addClass('active').
siblings().removeClass('active');
}

     if ($(document).height() == 1500) {
$('#m2').parent().addClass('active').
siblings().removeClass('active');
}

私は jQuery ディメンションのプロパティにあまり詳しくないので、このコードはあまり意味がありませんが、理解していただければ幸いです。

誰かがこれを機能させる方法を教えてくれたら、それは本当に素晴らしいことです.

ありがとう ：）

4

1 に答える 1

11

あなたが何をしようとしているのかは完全には明らかではありませんが、私はそれを突き刺します. ウィンドウが垂直方向にスクロールした量を取得するには、jQuery のscrollTop()関数を使用します。このheight()関数は、呼び出された要素の高さをピクセル単位で提供するため、スクロール値が必要な場合はあまり役に立ちません。このようなものが必要なものに近いかもしれません:

// bind a function to the window's scroll event, this will update
// the 'active' class every time the user scrolls the window
$(window).scroll(function() {    
    // find the li with class 'active' and remove it
    $("ul.menu-bottom li.active").removeClass("active");
    // get the amount the window has scrolled
    var scroll = $(window).scrollTop();
    // add the 'active' class to the correct li based on the scroll amount
    if (scroll <= 500) {
        $("#m1").addClass("active");
    }
    else if (scroll <= 1000) {
        $("#m2").addClass("active");
    }
    else {
        $("#m3").addClass("active");
    }
}

上記が正しい方向に進んでいない場合でも、役立つ可能性のある注意事項が他にもいくつかあります。などの行$('#m1').parent().addClass('active').siblings().removeClass('active');は、期待どおりに動作しない可能性があります。「アクティブな」クラスをliに追加してliの兄弟から削除するのではなく、実際にはクラスを親ulに追加し、ulの兄弟から削除しています。.parent()各行から削除してみてください。これでうまくいくはずです。

また、if 条件で == を使用しているため、値が正確に 500 または 1000 の場合にのみクラスが追加されます。これは意図したものとは思えません。そのため、上記のコードで、条件ステートメントを <= に変更しました。

お役に立てれば。

于 2010-04-24T04:59:30.863 に答える