pablocattaneo
8/14/2018 - 10:48 AM

Sticky Header on scroll

Sticky Header on scroll. #sticky #scroll

Source: https://stackoverflow.com/a/41752977/3599272 Animation: https://stackoverflow.com/a/17191375/3599272

sticky_and_animation.styl
content_copyfile_download
.sticky
	position fixed
	top 0
	z-index 1000
	animation fadeInFromNone 0.5s ease-out

@keyframes fadeInFromNone
	0%
		display none
		opacity 0

	1%
		display block
		opacity 0

	100%
		display block
		opacity 1
jquery.js
content_copyfile_download
$(document).ready(function() {
  var $navbar = $("#mNavbar");
  
  AdjustHeader(); // Incase the user loads the page from halfway down (or something);
  $(window).scroll(function() {
      AdjustHeader();
  });
  
  function AdjustHeader(){
    if ($(window).scrollTop() > 60) {
      if (!$navbar.hasClass("navbar-fixed-top")) {
        $navbar.addClass("navbar-fixed-top");
      }
    } else {
      $navbar.removeClass("navbar-fixed-top");
    }
  }
});