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;

绝对位置将使其高于所有元素，然后是top＆amp;左边可以保持其位置而不会打扰页面上的其他内容...

Answer 3

这只是一个想法：

尝试将visibility指定为hidden并复制标题。

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"
    });
 }
}

显示/隐藏div导致内容跳起来

3 个答案: