在滚动内容之前，不要滚动英雄

Question

我很难创建此效果，其中英雄中的内容完全滚动（100％的视口），然后页面的其他部分将显示。我设置它以便修复背景。当您使用底部填充分离滚动时，舞台div（应该垂直居中）应该出现，第二部分在完全滚动之前不应显示。不完全确定我做错了什么。代码和代码集在

之下

http://codepen.io/anon/pen/xRPeJj

$(document).ready(function(){

	var windowHeight = $(window).height();
  
	$('#stage_1').css({"height": windowHeight + 'px'});
  
  $('#stage_1').bind('scroll', function() {
		if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) {
			$('.second-section').css("background-attachment", "scroll");
		}
	});
  
});

body, html {
  height: 100%;
  margin: 0;  
}
.container {
  padding: 0 1em;
  margin: 0 auto;
  width: 1000px;
}
.hero {
	background-size: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
  color: #fff;
   background-image: url("http://www.jshiebert.com/wp-content/uploads/2015/12/photo-1424020128429-a60765861de1.jpg");
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 100%;
  height: 100vh;
  flex-direction: column;
}

#stage_1 {
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero">
  <div class="container">
    <div id="stage_1">
      <div class="hero__text">
          <h1>lorem to<span>the Rocks</span></h1>
          <h2>Enter for your chance to explore the Rocky Mountains at River Stone Resort & lorem  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam repudiandae nesciunt iusto eveniet!  </h2>
          </div>    
  </div>
    <div id="stage_2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab fuga fugit, repellendus, reprehenderit itaque cum suscipit. Error magni, ipsum eligendi suscipit, rerum vero doloremque culpa, deleniti quae id repellat veniam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus recusandae vel sed at repudiandae ipsam, natus laborum. Sit vitae eos labore, explicabo, blanditiis debitis aut dolor, nesciunt nam ratione temporibus.
    </div>
</div>
</div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ab, neque autem sequi maxime architecto praesentium aspernatur veritatis corporis voluptas vitae, nemo at mollitia aperiam! Reprehenderit facere esse officiis voluptas. Lorem ipsum dolor
  sit amet, consectetur adipisicing elit. Neque molestias hic nihil provident repellat, ad quas doloremque placeat consequuntur voluptatem, repellendus suscipit voluptate aspernatur ea! Voluptatem, est ducimus? Aliquam, voluptates. lorem Lorem ipsum dolor
  sit amet, consectetur adipisicing elit. Deleniti consequatur modi excepturi fuga corrupti, tempora, odit accusamus vitae ex, reiciendis maxime porro ipsa quisquam repudiandae, veritatis asperiores fugit. Eveniet, ipsam!Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Dolore fuga, dignissimos aperiam velit officiis cum voluptate deleniti praesentium at et aliquam natus, consequuntur dolorem repellendus eos mollitia libero esse omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto
  maxime, delectus, quis eaque ex quibusdam impedit voluptate, in totam corporis repellat ipsa molestias minima vitae laborum explicabo possimus tempore dolore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, facere iusto? Suscipit quisquam
  excepturi facilis vel reprehenderit inventore perspiciatis autem dolore minima cumque. Dolores suscipit rem, accusantium perferendis vel deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora deserunt esse ab molestiae debitis aliquid
  sunt assumenda laborum, laudantium, iste explicabo quae magni vel ipsum quas quos impedit sequi dicta!
</div>