$sticky_Fixed

by mtambulut

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<section>
  <div class="sticky">This div will stick to the top</div>
</section>

CSS

body { margin: 0; }

section { 
  height: 2000px;
  padding-top: 100px; }

.sticky { background: orange; }

.fixed {
  position: fixed;
  top:0; left:0;
  width: 100%; }

JavaScript

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});