1

単一ページの Web サイトの特定のセクションをスクロールしているときに、メニュー項目が選択されているように見せたい

各要素の位置をキャプチャして変数に格納し、その要素の上部がページの上部を通過したときにクラスを適用しようとしました。

Java スクリプト:

 var blockone = Math.abs($("#one").position().top);
 var blocktwo = Math.abs($("#two").position().top);
 var blockthr = Math.abs($("#thr").position().top);
 var blockfou = Math.abs($("#fou").position().top);
 var blockfiv = Math.abs($("#fiv").position().top);
 var blocksix = Math.abs($("#six").position().top);

    function removeSelected() {
        $('#menu li').removeClass('selected');
    }

$("#frame").scroll( function() {   
    $("#menu li:nth-child(1)").addClass('selected');

    var value = $(this).scrollTop();
    if ( value < blocktwo ){
        removeSelected();
        $("#menu li:nth-child(1)").addClass('selected');  
    } else if (value < blockthr){
        removeSelected();
        $("#menu li:nth-child(2)").addClass('selected');
    }  else if (value < blockfou){
         removeSelected();
         $("#menu li:nth-child(3)").addClass('selected');   

    } else if (value < blockfiv){
         removeSelected();
         $("#menu li:nth-child(4)").addClass('selected');
    }    else if (value < blocksix) {
        removeSelected();
        $("#menu li:nth-child(5)").addClass('selected');
    } else {
        removeSelected();
        $("#menu li:last-child").addClass('selected'); 
    }
});

私は何が欠けていますか？私はここで作業中のjfiddleを持っています: http://jsfiddle.net/zer0ruth/pgbef/1/

4

1 に答える 1

5

#frame唯一の問題は、スクロールがオンになっているはずなのに、スクロールをバインドすることですwindow。

しかし、まあ、あなたのコードをいじって初めてそれを見たので、あなたのために無料の最適化されたコードがあります: http://jsfiddle.net/pgbef/15/。

配列に位置を保存することは、6 つの変数を持つよりも優れており、コードを変更せずにセクションを持つことができます。

var position = [];

$('.block').each(function(){
    position.push(Math.abs($(this).position().top))
})

次に、スクロール機能もかなり短くなります！

$(window).scroll( function() {

    var value = $(this).scrollTop() + $('#menu').height();

    $.each(position, function(i){
        if(this > value){
            $('.selected').removeClass('selected');
            $("#menu li").eq(i-1).addClass('selected');
            return false;
        }
    })
});
于 2013-06-04T23:02:29.187 に答える