Friday 16 February 2018

Add sticky content with jQuery

Steps:

1. Add the following on your css file.
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
}

2. Add the following on your JS file where you need to display the sticky when scrolling up.
jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() >= 200) {
        jQuery('.classNameOfStickyContentHere').addClass('fixed-header');
    }
    else {
        jQuery('.classNameOfStickyContentHere').removeClass('fixed-header');
    }
});

3. HTML Content
Display me as sticky when scrolling up....