1

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

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

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它应该是 on 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;
        }
    })
});
于 2013-06-04T23:02:29.187 回答