Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save omurphy27/5026679 to your computer and use it in GitHub Desktop.
Save omurphy27/5026679 to your computer and use it in GitHub Desktop.
JQUERY - Fixed header gets tranparent when scrolling down
// Jquery make a fixed header become transparent as you scroll down
// and revert to not transparent when you scroll back up
// here is a url with more details: http://stackoverflow.com/questions/2921186/scroll-function-jquery
(function() {
var $header = $('#navbar');
$(window).scroll(function () {
if(scrollY <= 0){
$header.animate({
opacity: 1
}, 300);
}
if(scrollY > 0 && $header.is(':not(:animated)')){
$header.animate({
opacity: .75
}, 300);
}
});
// as for making the header fixed, simply have the following in the CSS:
#navbar {
position: fixed;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment