Skip to content

Instantly share code, notes, and snippets.

@luizventurote
Last active April 5, 2018 13:25
Show Gist options
  • Save luizventurote/5291be1057fd644322ccab56f178ed6b to your computer and use it in GitHub Desktop.
Save luizventurote/5291be1057fd644322ccab56f178ed6b to your computer and use it in GitHub Desktop.
Javascript code to fix the header in the top.
jQuery(function($){
var header = document.querySelector('header.page-header .header.content'),
panel = document.querySelector('header.page-header .panel'),
$panel = jQuery(panel),
$header = jQuery(header),
headerContainer = document.querySelector('header.page-header'),
$headerContainer = jQuery(headerContainer),
lastScroll = 0,
upSign = -1,
downSign = -1;
$headerContainer.css('position', 'fixed');
// Fixed Header space
$headerContainer.after('<div class="fixed-header-space" style="height: '+$headerContainer.outerHeight()+'px; display: block;width: 100%"></div>');
$( window ).resize(function() {
jQuery('.fixed-header-space').height($headerContainer.outerHeight());
});
$(window).scroll(function(event){
//Sets the current scroll position
var st = $(this).scrollTop();
//Determines up-or-down scrolling
if (st > lastScroll){
if(downSign || downSign == -1) {
$headerContainer.animate(
{top:-$panel.outerHeight()},
300,
function () { });
upSign = 1;
downSign = 0;
}
}
else {
if(upSign || upSign == -1) {
$headerContainer.animate(
{top:0},
300,
function () { });
upSign = 0;
downSign = 1;
}
}
//Updates scroll position
lastScroll = st;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment