jquery - 我试图在页面滚动 > 920 时显示 Logo

Question

您好，我正在尝试设置侧边栏 Logo ，使其仅在页面滚动到达下一部分时显示，而不会导致 Logo 空间导致页面跳转

我正在使用以下代码

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

我以为我可以使用 css 来保持空间相同，但似乎在 Logo 可见时将其添加到空间中？

任何建议表示赞赏

Answer 1

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

请参阅此处的工作示例: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。添加 bool 变量来检查是否需要应用，可以杜绝不必要的调用，效率会更高。

在此处查看更新的工作示例 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;
    }
});

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