window scroll fade in fade out - Elements

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" data-semver="3.0.3" data-require="bootstrap-css@*" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container well h-2000">
      <h1 class="fixed-top">Scroller down/up.. </h1><br />

      <div class="scroll-element" id="block-01"><button type="button" class="btn btn-primary btn-lg">Block -  01</button></div>
      <div class="scroll-element" id="block-02"><button type="button" class="btn btn-success btn-lg">Block -  02</button></div>
      <div class="scroll-element" id="block-03"><button type="button" class="btn btn-info btn-lg">Block -  03</button></div>
    </div>
  </body>

</html>

$(window).scroll(function (){
    var scrollTop = $(this).scrollTop();
    
    $('.default-block').hide();
      if( scrollTop > 80 && scrollTop < 350 ){
        $('#block-01').fadeIn();
        $('#block-02').fadeOut();
        $('#block-03').fadeOut();
      } else if( scrollTop > 350 && scrollTop < 400 ) {
        $('#block-02').fadeIn();
        $('#block-01').fadeOut();
        $('#block-03').fadeOut();
      }
      else if( scrollTop > 600 ) {
        $('#block-03').fadeIn();
        $('#block-01').fadeOut();
        $('#block-02').fadeOut();
      }
});

/* Styles go here */
.scroll-element{
    position: fixed;
    top: 50px;
	  left:400px;
    display:none;
}
.h-2000{
  height:2000px;
}
.fixed-top{
  position: fixed;
  top: 50px;
}