Animated topbar - show and hide on scroll
header{
-webkit-transition: top 0.2s ease-out;
-moz-transition: top 0.2s ease-out;
-ms-transition: top 0.2s ease-out;
-o-transition: top 0.2s ease-out;
transition: top 0.2s ease-out;
}
// 65 -> topbar height
// 1000 -> transition time
var screen_size;
var lastScrollTop = 0;
var header_showing = false;
var scrolling = false;
var first_load = true;
var mobile_menu_expanded = false;
$('.toggle-topbar.menu-icon').on('click', function(){
if(mobile_menu_expanded == false){
mobile_menu_expanded = true;
}else{
mobile_menu_expanded = false;
}
});
$('ul.right a').on('click', function(){
if(mobile_menu_expanded == false){
mobile_menu_expanded = true;
}else{
mobile_menu_expanded = false;
}
});
$(window).scroll(function(event){
scrolling = true;
var st = $(this).scrollTop();
if(st > lastScrollTop && st > 65){
if(screen_size == 'small'){
if(mobile_menu_expanded == false){
if(header_showing !== false || first_load == true){
if(first_load == true){first_load = false;}
header_showing = false;
$('header').css({'top':-65});
}
}
}else{
if(header_showing !== false || first_load == true){
if(first_load == true){first_load = false;}
header_showing = false;
$('header').css({'top':-65});
}
}
}else{
if(header_showing !== true){
header_showing = true;
$('header').css({'top':0});
}
}
lastScrollTop = st;
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
if(header_showing !== false || first_load == true){
if(st > 65){
if(mobile_menu_expanded == false){
if(first_load == true){first_load = false;}
header_showing = false;
$('header').css({'top':-65});
}
}
}
}, 1000));
});