顯示/隱藏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" 
    }); 
} 
}