Tiggles ツ of Speak Creative
11/28/2018 - 5:43 PM

Fixed header on scroll

[Fixed header on scroll] Fix the header even on scroll. #javascript

sticky-header.js
content_copyfile_download
$(document).ready(function() {


/* ==========================================================================
Fixed Header on scroll
========================================================================== */

$(window).scroll( function(){

  // var headerOffset = $('header').offset().top;
  var headerOffset = $('.home-hero').height();
  var windowOffset = $(window).scrollTop();

  // utility nav
  headerOffset -= $('#utility-nav').height();

  if ( headerOffset <= windowOffset ) {
    $('header').addClass('sticky');
    $('#utility-nav').addClass('scroll');
    $('.home-hero').css({'margin-bottom':'60px'});
  } else {
    $('header').removeClass('sticky');
    $('#utility-nav').removeClass('scroll');
    $('.home-hero').css({'margin-bottom':'0'});
  }

});

}); //end doc ready