隐藏透明标题下的滚动页面内容

Question

我已经尝试了一些解决方案的问题与相同的标题，但没有一个似乎对我来说很工作。他们都只会导致内容滚动，打破页脚位置，并防止实际页面滚动，我需要更改标题大小。

我创建了一个拨弄这里我的网站的要领： https://jsfiddle.net/bsummers/nstjmxy5/1/

我希望能找到一种方法，没有表现出任何的白内容框滚动标题后面的。我希望它消失在导航栏后面。

被这个摔跤2天，和运行的想法......

\t $(document).on("scroll",function(){ 
 
\t \t if($(document).scrollTop()>100){ 
 
\t \t \t $("header").removeClass("large").addClass("small"); 
 
\t \t \t } 
 
\t \t else{ 
 
\t \t \t $("header").removeClass("small").addClass("large"); 
 
\t \t \t } 
 
\t \t });

body { 
 
    background: transparent url("http://www.cdldodgeball.ca/new/wp-content/themes/party/images/background2.png") no-repeat fixed center top; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
header{ 
 
    background: rgba(0,0,0,0.5); 
 
    float: left; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 10; 
 
} 
 
/* Sizes for the bigger menu */ 
 
header.large{} 
 
header.large img{ 
 
    width: 354px; 
 
    height: 105px; 
 
} 
 
/* Sizes for the smaller menu */ 
 
header.small{} 
 
header.small img{ 
 
    width: 250px; 
 
    height: auto; 
 
} 
 
header, nav, header img{ 
 
    transition: all 1s; 
 
    -moz-transition: all 1s; /* Firefox 4 */ 
 
    -webkit-transition: all 1s; /* Safari and Chrome */ 
 
    -o-transition: all 1s; /* Opera */ 
 
} 
 

 
nav{ 
 
    background: #444; 
 
    line-height: 50px; 
 
} 
 

 
section.content { 
 
    background: #fff none repeat scroll 0 0; 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    position: relative; 
 
    top: 160px; 
 
    height: 1000px; 
 
    
 
    max-width: 80%; 
 
    margin: 0 auto; 
 
} 
 

 
main#content { 
 
    background: blue; 
 
    display: table-cell; 
 
    margin: 0; 
 
    padding-right: 20px; 
 
    width: 100%; 
 
} 
 
aside { 
 
    background: red; 
 
    display: table-cell; 
 
    min-width: 200px; 
 
    vertical-align: top; 
 
    width: 200px; 
 
} 
 

 
footer{ 
 
    background: green; 
 
    position: relative; 
 
    top: 160px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<header class="fullwidth large" role="banner"> 
 
\t <div class="container"> 
 
    
 
<a id="logo" href="#" rel="home"><img class="logo" src="http://www.cdldodgeball.ca/cms/wp-content/themes/CDL/images/logo.png" /></a> 
 
    
 
\t \t \t <nav role="navigation"> 
 
\t \t \t \t Navigation 
 
\t \t \t </nav> 
 
\t \t </div> 
 
</header> 
 

 

 
<section class="content"> 
 
\t \t <main role="main" id="content"> 
 
     content 
 
    </main> 
 
    <aside> 
 
     sidebar 
 
    </aside> 
 
</section> 
 

 

 

 
<footer role="contentinfo" class="fullwidth"> 
 
\t <div class="container"> 
 
    FOOTER   
 
\t </div> 
 
</footer>

Answer 1

一个没有改变你的HTML结构的方法是添加上你的头相同的背景图片并应用rgba()不透明度为.container：

JS Fiddle

body { 
    background: transparent url("http://www.cdldodgeball.ca/new/wp-content/themes/party/images/background2.png") no-repeat fixed center top; 
    padding: 0; 
    margin: 0; 
} 

header{ 
    background: transparent url("http://www.cdldodgeball.ca/new/wp-content/themes/party/images/background2.png") no-repeat fixed center top; 
    float: left; 
    width: 100%; 
    position: fixed; 
    z-index: 10; 
} 
.container { 
    background: rgba(0,0,0,.5); 
}