網站內容在滾動時在固定導航欄後面消失，並帶有邊距頂部

Question

我正在嘗試在帶有背景紋理的網站頂部創建具有邊緣頂部的固定導航欄。 我想要隱藏網站的內容，但滾動時向下的導航欄，但我希望保持這個空的邊緣的所有時間。 這裏是在簡單的HTML：

<nav> 
    My Fixed navbar with margin on top 
</nav> 
<div id="content"> 
    My content that shouldn't apppear in the margin-top of the navbar 
</div> 

我已經做了jfiddle解釋我的問題： https://jsfiddle.net/nicoj/ttL3mp4r/8/

基本上向下滾動時，這是很酷的內容被隱藏導航欄的後面，但重新出現在其上方之後...

我想要做的是防止內容重新出現在導航欄上方：保持導航欄和背景圖像始終位於頂部。 我正在考慮讓#content使用overflow：scroll進行修復，但隨後滾動條被嵌入到我不想要的內容中。

我覺得我在這裏錯過簡單的東西... 我希望你有任何提示！

尼科

Answer 1

考慮的事實，你的背景也是固定的，有解決這個漂亮的快速簡便的方法：

HTML

<div id="overlay"> 
</div> 
<nav> 
    fixed navbar 
</nav> 
<div id="content"> 
    My content that should not appear above the navbar 
</div> 

CSS

#overlay { 
    position: fixed; 
    background-image: url("http://allroundnews.com/wp-content/uploads/2012/02/seamless-wood-texture-free-76.jpg"); 
    width: 100%; 
    height: 50px; 
    margin: 0; 
    top: -20px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Fiddle

我相信有更好的方法來解決這個問題，但這對於一個簡單的問題來說似乎是一個簡單的解決方法。