Question

我有一个滚动标题的问题，它在浏览器的底部开始生活，一旦页面向下滚动并且标题到达顶部，它就会修复。

问题是当它修复时，下面的div会说将标题的高度跳到顶部。

这是我的jQuery

var elementPosition = $('header').offset();

$(window).scroll(function(){
    if($(window).scrollTop() > elementPosition.top){
        $('header').addClass("stick");
    } else {
        $('header').removeClass("stick");
    }
});

这是css

.stick {
    position:fixed;
    top:0;
}

Answer 1

出现问题是因为在修复标题时，您将从页面流中删除它。这样做，以下内容＆＃34;跳跃＆＃34;取而代之。

一个解决方案是添加一个＆＃34; ghost＆＃34; div与标题高度相同，默认隐藏。

当标题到达窗口的顶部并将其固定到位时，您也取消隐藏ghost div，它会立即取代它并防止以下内容跳起来。

另一个解决方案是添加＆＃34; margin-top＆＃34;对于以下内容，无论你的标题是多高。这将产生相同的效果，并将阻止页面内容的其余部分跳跃。

滚动粘性标题导致跟随div到达顶部时跳转

1 个答案: