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

Question

我尝试了一些来自同标题问题的解决方案，但似乎没有一个对我很有效。它们都只会导致内容滚动，破坏页脚位置并阻止实际页面滚动，我需要让页眉更改大小。

我在这里用我网站的基本要素创建了一个 fiddle : 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 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);
}