0

特定のポイントを通過すると、ナビゲーションが画面の上部に固定されるようにするスクリプトを作成しました。うまく機能するので、ページ内のセクションに到達したときにナビゲーションのセクションを強調表示する別のスクリプトを作成することにしました。唯一の問題は、各セクションのピクセル数を見積もったことです。jQuery .offset() を使用してこれをより正確にできることはわかっていますが、現在のスクリプト内でそれを記述する方法がわかりません。以下は、関連する HTML と JavaScript です。堅実な提案をいただければ幸いです。ありがとう。

<nav class='pink-bar'><!--<img class='nav' src='assets/nav.png' alt='navigation bar' />  -->
     <div class='content'>
            <ul class='menu'>
                <li id='menu-1'>Home</li>
                <li id='menu-2'>Buy The Experience</li>
                <li id='menu-3'>Barter</li>
                <li id='menu-4'>Preview</li>
                <li id='menu-5'>About</li>
            </ul>


$(function() {
   var num = 460; //number of pixels before modifying styles
   var num2 = 2862;
   var num3 = 3715;
   var num4 = 4510;

$(window).on('scroll', function () {
    if  ($(window).scrollTop() > num4)
    {   $('.pink-bar').addClass('fixed');
        $('#menu-5').addClass('ScrollNav');
        $('#menu-4, #menu-3, #menu-2,').removeClass('ScrollNav');


    } else if ($(window).scrollTop() > num3)
    {   $('.pink-bar').addClass('fixed');
        $('#menu-4').addClass('ScrollNav');
        $('#menu-5, #menu-3, #menu-2 ').removeClass('ScrollNav');

    } else if  ($(window).scrollTop() > num2)
    {   $('.pink-bar').addClass('fixed');
        $('#menu-3').addClass('ScrollNav');
        $('#menu-4, #menu-5, #menu-2').removeClass('ScrollNav');

    } else if  ($(window).scrollTop() > num) {
        $('.pink-bar').addClass('fixed');
        $('#menu-2').addClass('ScrollNav');
        $('#menu-3, #menu-5, #menu-3').removeClass('ScrollNav');

    }  else {
        $('.pink-bar').removeClass('fixed');
        $('#menu-2, #menu-3, #menu-4, #menu-5').removeClass('ScrollNav');
    }

    });

});
4

1 に答える 1

0

どうですか：

var num = $('#menu-1').offset().top;
var num2 = $('#menu-2').offset().top;

スタイルによっては、余白と境界線を考慮するために、少し調整する必要がある場合があります。

より良い方法は、すべてのメニュー項目に単一のクラスを$('.menu-class').each(...)与えてから、それらすべてをループして、(調整されたオフセット) と現在の位置を考慮して何をすべきかを決定することです。これにより、より多くの要素に拡張可能になります。

于 2013-08-13T02:10:56.280 に答える