Display div when scrolling

by Troy Johnson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll down... </p>



<div class="bottomMenu">
<a title="Back to top"  href="#" ><i style="font-size: 40px;color: #289dcc;opacity: 1;filter: alpha(opacity=100);bottom: 20px;position: fixed;right: 20px;opacity: 0.5;filter: alpha(opacity=50);" class="fa fa-chevron-up hidden-print"></i>back to the top</a>  
 </div>

CSS

body {
  height: 1600px;
}
.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}

JavaScript

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});