显示/隐藏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

这只是一个想法：

尝试指定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" 
    }); 
} 
}