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

Question

我已经尝试了许多解决方案的问题与相同的标题，但他们似乎都不太适合我。它们都只导致内容滚动，破坏页脚的位置，并防止实际页面滚动，我需要有标题改变大小。

我已经创建了一个小提琴与我的网站的基本要素在这里:https://jsfiddle.net/bsummers/nstjmxy5/1/

我希望找到一种方法，不显示任何白色内容框滚动在标题后面。我想让它消失在导航栏后面。

已经纠结了2天了，想不出办法了…

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

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">
	<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>
    
			<nav role="navigation">
				Navigation
			</nav>
		</div>  
</header>
<section class="content">
		<main role="main" id="content">
      content
    </main>
    <aside>
      sidebar
    </aside>
</section>
<footer role="contentinfo" class="fullwidth">
	<div class="container">
    FOOTER        
	</div>
</footer>

Answer 1

一个不改变html结构的选择是在标题上添加相同的背景图像，并将rgba()的不透明度应用于.container:

JS小提琴

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