Skip to content

Instantly share code, notes, and snippets.

@webdevbrian
Last active December 18, 2015 09:19
Show Gist options
  • Save webdevbrian/5760131 to your computer and use it in GitHub Desktop.
Save webdevbrian/5760131 to your computer and use it in GitHub Desktop.
Simple Sticky Header
JS:
// Get the initial position of the header
var headerStick = $('.header').offset().top;
$(window).scroll(function(){
$(window).scrollTop() > headerStick ? $('.header,.headerAlias').addClass('active') : $('.header,.headerAlias').removeClass('active');
});
CSS:
.header { width: 100%; height: 80px; background: #FF4444; }
.header.active { position: fixed; top:0; margin-bottom: 80px; -webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow: 0 4px 4px -2px #000000; box-shadow: 0 0px 15px -2px #000000; }
.headerAlias { width: 100%; height: 80px; display: none; }
.headerAlias.active { display: block; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment