Question

您好我正在尝试设置侧边栏徽标，仅在页面滚动到达下一部分时显示，而没有徽标空间导致页面跳转

我正在使用以下代码

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

我以为我可以使用css来保持空间相同但是当徽标可见时它似乎会将它添加到空间中？

任何赞赏的建议

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。添加布尔变量以检查是否需要应用它将停止不必要的调用，并且效率会更高。

请在此处查看更新的工作示例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时应用，而不是在每个滚动事件上滚动。

Answer 2

由于jQuery Show（）和Hide（）的工作方式与css display属性相同，因此如果您希望徽标的空间保留在布局中，则无论徽标是否可见，您都可以尝试使用可见性或不。

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

这可能有助于页面跳转问题。

我正在尝试在页面滚动时显示徽标＆gt; 920

2 个答案: