Basic Slide Out Panel on Scroll

<style>

 #slidebox { width: 280px; height: auto; padding: 15px; background-color: #fff; position: fixed; z-index:3; top:200px; left: -300px; -moz-box-shadow: -2px 0px 5px #aaa; -webkit-box-shadow: -2px 0px 5px #aaa; box-shadow: -2px 0px 5px #aaa; }

 #slidebox p { font-size:14px; margin-top:0px; }

 #slidebox label { font-size:14px; display:block; margin:3px 0 0 0; }

 #slidebox input { margin-right:5px; }

a.close { width: 16px; height: 16px; font-size:16px; position: absolute; cursor: pointer; top: 10px; right: 10px; }

a.close:hover { background-position: 0px -13px; }

 </style>

 <div id="slidebox">

 <a class="close">

  <i class="fa fa-times-circle">

  </i>

 </a>

 <p>

  <b>

  Multiple Map Layout

  </b>

 </p>

 <p>

  If you have more than one office location you can choose an alternative layout for the contact maps section to allow for multiple maps.

 </p>

 </div>

 <script>

 $(function() {

 $(document).scroll(function() {

  var y = $(this).scrollTop();

  if (y > 1000) {

   $('#slidebox').stop(true).animate({'left': '-300px'}, 100);

   return;

  }

  if (y > 500) {

   $('#slidebox').animate({'left': '0px'}, 100);

  } else {

   $('#slidebox').stop(true).animate({'left': '-300px'}, 100);

  }

 });

  $('#slidebox .close').bind('click',function(){

$(this).parent().remove();

});

});

 </script>