jonnykates
8/31/2017 - 3:47 PM

Sticky navigation

Sticky navigation

// grab the initial top offset of the navigation
var stickyNavTop = $("nav.menuMain").offset().top;
var timer;

// our function that decides weather the navigation bar should have "fixed" css position or not.
var stickyNav = function() {
  var scrollTop = $(window).scrollTop(); // our current vertical position from the top

  // if we've scrolled more than the navigation, change its position to fixed to stick to top,
  // otherwise change it back to relative
  if (scrollTop > stickyNavTop) {
    $("header.pageHeader").addClass("sticky");
  } else {
    $("header.pageHeader").removeClass("sticky");
  }
};

stickyNav();
// and run it again every time you scroll
$(window).scroll(function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    stickyNav();
  }, 100);
});
.menuMain.sticky {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}