滚动时将类添加到菜单项

I want the menu items to look like they are selected when you are scrolling through certain sections of a single page website

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

I tried capturing the position of each element and store it in a variable and then apply a class when the top of that element passes the top of the page.

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

Java Script:

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

What am I missing? I have a working jfiddle here: http://jsfiddle.net/zer0ruth/pgbef/1/

我错过了什么?我在这里有一个工作的小提琴:http://jsfiddle.net/zer0ruth/pgbef/1/

1 个解决方案

#1

The only problem is that you bind the scroll even on #frame while it should be on window.

唯一的问题是,即使在#frame上也应该在窗口上绑定滚动。

But well, I saw that only after playing around with you code, so I have a free optimised code for you: http://jsfiddle.net/pgbef/15/.

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

Saving you position in array is better than having 6 var and you can had a section without changing code:

保存在数组中的位置比使用6 var更好,并且您可以在不更改代码的情况下获得一个部分:

var position = [];

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

Then your scroll function is way shorter too!

然后你的滚动功能也更短!

$(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