kier0
7/17/2015 - 10:21 PM

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

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>