在透明頁眉後面隱藏頁面內容

Question

我有一個固定的導航欄，使用的是具有透明位的實際功能區上方和下方的彎曲功能區圖像，並且具有縮放全尺寸背景（所以我無法制作具有匹配背景的導航欄頂端）。我希望頁面內容在用戶滾動時在導航欄中途消失。

這是同樣的問題，這兩個問題和答案（這是很好）不適合我。

Hide scrollable content behind transparent fixed position divs when scrolling the page?

Hide Scrolling Content Under Transparent Header

這是我不想要的東西：

http://imageshack.us/photo/my-images/213/badnr.jpg/

這是那種我想要的東西，但沒有滾動條：

http://imageshack.us/photo/my-images/534/scrolled.jpg/

在此先感謝您的幫助，非常感謝，本網站已經並將繼續教我很多。

Answer 1

css z-index屬性應該能夠把任何元素放在另一個元素的前面或後面。像這樣：

<style type="text/css"> 
body, html { 
margin:0 auto; 
padding:0; 
font-family:Verdana, Geneva, sans-serif; 
font-size:12px; 
} 
/* Header Styling */ 
#header { 
color:#FFF; 
background: url(/images/header-back.png) repeat-x; 
position:fixed; 
top:0; 
left:0; 
width:100%; 
height:50px; 
z-index:1; 
    } 

#headerWrap { 
width:1024px; 
margin:0 auto; 
height:50px; 
} 
/* Sub Header */ 
#subHeader { 
position:fixed; 
top:50px; 
margin:0 auto; 
z-index:1; 
} 
#subHeaderWrap { 
height:30px; 
width:830px; 
border-bottom:thin solid #333; 
background: url(../images/subheader.png) repeat-x; 
    } 
    /* Contaier */ 
    #container { 
margin:0 auto; 
width:1024px; 
min-height:600px; 
    } 
    #containerWrap { 
margin-top:50px; 

    } 

    /* Menu */ 
    #sidebar { 
float:left; 
width:140px; 
min-height:600px; 
    } 
    #content { 
border-left:#333333 solid thin; 
border-right:#333333 solid thin; 
border-bottom:#333333 solid thin; 
float:left; 
width:830px; 
min-height:600px; 
padding-top:30px; 
margin-bottom:10px; 
    } 
#contentWrap { 
width:830px; 
margin:0 auto; 
padding-bottom:10px; 
} 
</style> 
<div id="container"> 
<div id="header" style="z-index:1;"/* Places div on top */"> 
This is transparent. 
</div> 

<div id="containerWrap"> 
    <div id="sidebar"> 
Menu Items Here 
    </div> 

<div id="content"> 
    <div id="contentWrap"> 

<div id="subHeader" style="z-index:1;"/* Places div on top */"> 
<div id="subHeaderWrap"> 
This div is transparent too, but is now on top. 
</div> 
</div> 

Anything here is scrollable and will scroll under the divs above with z-index:1; 


    </div> 
</div> 

Answer 2

我找到了您要找的解決方案。

你打算使用一個小Jquery和一些CSS。我會假設你在你的頁腳中加載了最新版本的Jquery。

標題將被固定，其中的元素將是絕對的。我們不會關注標題內的元素，因爲這對於這一點並不重要，但是如果您要在標題中放置菜單和徽標，則可以使其成爲絕對的。

分配了類標題的HTML Div或者如果您願意，您可以創建一個<header></header>元素，無論哪一個。但對於這個例子，我們將使用一個類。

<div class="header">...Your Header Elements In this...</div> 

CSS

body {background: url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;} 
.header {position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: transparent;} 

JS - 我用一個單獨的JS文件，然後我在頁腳加載Jquery的後加載此。

$(window).scroll(function() { 
"use strict"; 
var windowYmax = 1; 
var scrolledY = $(window).scrollTop(); 
    if (scrolledY > windowYmax) { 
    $('.header').addClass("hide-content"); 
    } else { 
    $('.header').removeClass("hide-content"); 
    } 
}); 

添加這個CSS分配新類：

.hide-content {background: transparent url('../img/page-background.jpg') no-repeat top center fixed; background-size: cover;} 

這裏是一個的jsfiddle：The Fiddle 我是不是能夠得到JS中的jsfiddle工作由於某種原因，也許有人可以修復問題，但我沒有太多時間來混淆JSfiddle，但想提供一個最終結果的例子。所以我只是將JS獲得的類添加到HTML中的div中，並且可以在預覽窗格中看到結果。