Question

我希望当您滚动浏览单页网站的某些部分时，菜单项看起来就像被选中一样

我尝试捕获每个元素的位置并将其存储在变量中，然后在该元素的顶部通过页面顶部时应用一个类。

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'); 
    }
});

我错过了什么？我在这里有一个工作的小问题：http://jsfiddle.net/zer0ruth/pgbef/1/

Answer 1

唯一的问题是，即使在#frame {@ 1}}上，您也可以将其滚动到window上。

但是，我只是在玩了代码之后才看到它，所以我有一个免费的优化代码：http://jsfiddle.net/pgbef/15/。

在数组中保存位置比使用6 var更好，并且您可以在不更改代码的情况下使用部分：

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;
        }
    })
});

滚动时将类添加到菜单项

1 个答案: