1

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

我正在使用以下代码

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

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

任何建议表示赞赏

4

2 回答 2

2

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

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

于 2013-11-10T12:49:26.993 回答
1

由于 jQuery Show() 和 Hide() 的工作方式与 css 显示属性相同，如果您希望徽标的空间保留在布局中，无论徽标是否可见，您可能需要尝试使用可见性。

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

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

于 2013-11-10T13:12:17.287 回答