javascript - 滚动时向菜单项添加类

Question

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

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

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/

Answer 1

唯一的问题是您甚至在 #frame 上绑定(bind)了滚动条，而它应该在 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;
        }
    })
});