Make top logo or nav fade on scroll down, and reappear on scroll up. var triggerHeight = 50; ---->>> is height of nav or logo so it downs face before you scroll past it. Scrolling up/down triggers class swap - use CSS to set opacity and animation
#the-element-to-fade{
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
#the-element-to-fade,
#the-element-to-fade.opaq {
opacity: 1;
}
#the-element-to-fade.glass {
opacity: 0;
}
// Logo Fade
<?php wp_enqueue_script('jquery'); ?>
<script>
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var triggerHeight = 50;
jQuery(window).scroll(function(){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = jQuery(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > triggerHeight){
// Scroll Down
jQuery('#the-element-to-fade').removeClass('opaq').addClass('glass');
} else {
// Scroll Up
if(st + jQuery(window).height() < jQuery(document).height()) {
jQuery('#the-element-to-fade').removeClass('glass').addClass('opaq');
}
}
lastScrollTop = st;
}
</script>