JavaScript
// =========================================================================
// SMART HEADER
// =========================================================================
add_action('wp_footer','header_sticky_script');
function header_sticky_script()
{
?>
<script>
// Hide Header on Scroll Down but Show when Scroll Up
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = '';
jQuery(window).load( function() {
navbarHeight = jQuery('header.site-header').outerHeight();
jQuery('body').css('paddingTop',navbarHeight);
});
jQuery(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
ghasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled()
{
var st = jQuery(this).scrollTop();
// Make sure to scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If scrolled down and are past the navbar
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
jQuery('header.site-header').css('top',-navbarHeight).removeClass('shadow');
} else {
// Scroll Up
if(st + jQuery(window).height() < jQuery(document).height()) {
jQuery('header.site-header').css('top',0).addClass('shadow');
}
}
if (st < 15){
jQuery('header.site-header').css('top',0).removeClass('shadow');
}
lastScrollTop = st;
}
</script>
<?php
}
CSS
/* Smart Header */
header.site-header {
position: fixed;
top: 0;
transition: top 0.3s ease-in-out;
width: 100%;
z-index: 9;
left: 0;
right: 0;
}
header.site-header.shadow {
-webkit-box-shadow: 0 0 50px rgba(0,0,0,.15);
box-shadow: 0 0 50px rgba(0,0,0,.15);
}
body.admin-bar header.site-header{
top: 32px;
}
@media only screen and (max-width: 780px)
{
body.admin-bar header.site-header{
top: 46px;
}
}
Leave a Reply