jquery - 显示/隐藏 div 导致内容跳转

Question

我有一些 jquery 在页面滚动的某个点隐藏和显示导航。唯一的问题是，当导航位置从相对更改为固定时，它会将页面上的所有内容向上移动以填充导航所在的空间。我似乎找不到有效的解决方案。这是脚本：

if ($(this).scrollTop() > 800) {
    $('nav a').css({
        "color": "#555"
    });
    $('header').css({
        "position": "fixed",
        "top": "0px",
        "background": "white"
    });
} else {
    if ($(this).scrollTop() <= 800) {
        $('nav a').css({
            "color": "white"
        });
        $('header').css({
            "position": "relative",
            "top": "0px",
            "background": "none"
        });
    }
}

Answer 1

执行此操作时，您应该始终在滚动一定量之后position: absolute;设置导航的样式。fixed您需要设置其余内容的样式，以便为导航部分留出空间（因此它需要保持固定高度），但您不会有任何“跳跃”效果。

Answer 2

放：

position: absolute;
top:0; left:0; 

绝对位置将使其高于所有元素，然后顶部和左侧可以保留其位置而不会干扰页面上的其他内容...

Answer 3

This is just an idea :

Try to specify visibility to hidden and make a clone of the header.

if ($(this).scrollTop() > 800) {
$('nav a').css({
    "color": "#555"
});
var $clone = $('header').clone();
$clone.css({
    "position": "fixed",
    "top": "0px",
    "background": "white"
 });
 $('header').css({"visibility": "hidden"});

} else {
 if ($(this).scrollTop() <= 800) {
    $('nav a').css({
        "color": "white"
    });
    $clone.hide();
    $('header').css({
        "position": "relative",
        "top": "0px",
        "background": "none",
        "visibility": "visible"
    });
 }
}