Ein- und Ausblenden der Navigationsleiste basierend auf der Bildlaufposition

Question

Ich habe eine vertikale Navigationsleiste, die angezeigt werden soll, und blende langsam ein, wenn der Benutzer unter der Kopfzeile blättert. Ebenso möchte ich, dass die Navigationsleiste verschwindet und langsam ausgeblendet wird, wenn der Benutzer auf die Kopfzeile scrollt. Dies ist meine aktuelle Funktion:

$(window).scroll(function() { 
     var scrollPos = $(window).scrollTop(); 
     if (scrollPos < 650) { 
      $('.navbar').fadeOut(4000); 
     } else { 
      $('.navbar').fadeIn(4000); 
     } 
    }); 

Das Problem dabei ist, dass, wenn ich unter dem Header blättern (oder speziell eine Position 650), die navbar schnell bei voller Opazität erscheint, verschwindet langsam aus, dann langsam verblasst zurück Wenn ich in die Kopfzeile blättern gehe, verschwindet sie schnell. Wie behebe ich das, um das gewünschte Verhalten zu erhalten?

Answer 1

Es wurde so geändert, dass es css-Übergang verwendet und außerdem eine leichte Entprellung für das Bildlaufereignis hinzugefügt wurde. Stein das Markup von @ Adriani6 ‚s Geige,: P

(function(){ 
 
    var timeout; 
 
    var $window = $(window); 
 
    var $navbar = $('.navbar'); 
 
    
 
    $window.on('scroll', function(e){ 
 
    clearTimeout(timeout); 
 
    
 
    timeout = setTimeout(function(){ 
 
     if ($window.scrollTop() < 650) { 
 
     $navbar.removeClass('hide'); 
 
     } else { 
 
     $navbar.addClass('hide'); 
 
     } 
 
    }, 100); 
 
    }); 
 
}());

body{ 
 
    height: 12000px; 
 
} 
 
.navbar{ 
 
    height: 100px; 
 
    width: 800px; 
 
    background-color: green; 
 
    position: fixed; 
 
    
 
    transition: opacity 4s; 
 
    opacity: 1; 
 
} 
 

 
.navbar.hide { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='navbar'></div>

Answer 2

Sie sicherstellen sollten, .navbar standardmäßig ausgeblendet haben, ist es dieses CSS geben

.navbar { 
    display: none; 
} 

Dann sollte es Beim Erreichen dieser Bildposition ohne diesen Blitz einblendbar.