October 8, 2013 17:50
diff --git a/jsbin.UnuQIdU.css b/jsbin.UnuQIdU.css
 header{
  width:100%;
  height:200px;
  background:teal;
 }

 .ad{
 width:500px;
  height:120px;
  margin:0 auto;
  background:red;
 }
 article{
  width:100%;
  height:1500px;
  background:yellow;
 }

 .ad2{
  width:500px;
  height:120px;
  margin:0 auto;
  background:blue;
  display: none;
 }
diff --git a/jsbin.UnuQIdU.html b/jsbin.UnuQIdU.html
 <!DOCTYPE html>
 <html>
 <head>
 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <meta charset=utf-8 />
 <title>JS Bin</title>
 </head>
 <body>
  <header>
    <div class='ad'></div>
      <div class='ad2'>
        <p> some content</p>
      </div>
  </header>
  <article></article>
  
 </body>
 </html>
  
diff --git a/jsbin.UnuQIdU.js b/jsbin.UnuQIdU.js
 $(function(){
  $(window).scroll(function(){
    var aTop = $('.ad').height();
    if($(this).scrollTop()>=aTop){
        $(".ad2").show();
    }
  });
 });
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<header>
	<div class='ad'></div>
	<div class='ad2'>
	<p> some content</p>
	</div>
	</header>
	<article></article>

	</body>
	</html>