透明なヘッダーのスクロールページの内容を隠す

Question

同じタイトルの質問からいくつかの解決策を試しましたが、どれも私のためにはうまくいかないようです。それらはすべて内容だけをスクロールさせ、フッターの配置を壊し、実際のページがヘッダーの変更サイズを持つ必要があるスクロールしないようにします。

私はここに私のサイトの必需品とフィドルを作成しました： https://jsfiddle.net/bsummers/nstjmxy5/1/

私は、ヘッダの後ろにスクロール白いコンテンツボックスのいずれかを表示しないための方法を見つけることを望んでいます。私はそれがナビゲーションバーの後ろに消えてほしいです。あなたのHTML構造を変更せずに

は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

1つのオプションは、あなたのヘッダーに同じ背景画像を追加することです

JS Fiddle

：と .containerから rgba()不透明度を適用します

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); 
}