jquery - 我尝试在页面滚动> 920时显示徽标

嗨，我正在尝试将侧边栏徽标设置为仅在页面滚动到达下一部分时显示，而徽标空间不会导致页面跳转

我正在使用以下代码

$(window).scroll(function(){
    if ($(window).scrollTop() > 920){
        $('#logo').show();
        $('#main-nav').css('top','0px');
    }
    else
                $('#logo').hide();
                $('#main-nav').css('top','100px');
                endif
});

我以为可以使用css来保持空间不变，但是当徽标可见时，似乎可以将其添加到空间中？

任何建议表示赞赏

最佳答案

您的代码应该可以正常工作，我认为您只有一些格式/语法错误。

在此处查看工作示例：http://jsfiddle.net/ZjED3/

$(window).scroll(function(){
    if ($(window).scrollTop() > 920) {
        $('#logo').show();
        $('#main-nav').css('top','0px');
    } else {
        $('#logo').hide();
        $('#main-nav').css('top','100px');
    }
});

使用上面的代码，每次滚动页面时都在操纵DOM。添加布尔变量以检查是否需要应用它会停止不必要的调用，并且效率更高。

在此处查看更新的工作示例http://jsfiddle.net/zvg4m/1/

var pastWaypoint = false;
$(window).scroll(function(){
    if ($(window).scrollTop() > 920 && !pastWaypoint) {
        $('#logo').show();
        $('#main-nav').css('top','0px');
        pastWaypoint = true;
    }
    else if ($(window).scrollTop() <= 920 && pastWaypoint)
    {
        $('#logo').hide();
        $('#main-nav').css('top','100px');
        pastWaypoint = false;
    }
});

使用上面的代码，仅当页面在任一方向上滚动超过920时才应用DOM操作调用，而不是在每个滚动事件上都应用。