Wie blende ich eine Navbar ein/aus, die nach dem Scrollen repariert wird?

Question

Bisher habe ich eine Navbar mit transparentem Hintergrund, wenn Sie auf der Seite landen. Nach einem gewissen Scrollschwellenwert wird die Klassennavbar repariert, wodurch die Navigationsleiste korrigiert und das Erscheinungsbild geändert wird.

Allerdings möchte ich, dass es einen sanften Ein- und Ausblendeffekt hat, wenn es erscheint (und wenn Sie wieder hochscrollen, verschwindet).

Wie konnte ich das erreichen? Jquery FadeIn und FadeOut funktioniert nicht, da es die Navbar mit dem FadeOut tatsächlich vollständig verbirgt.

<div id="nav" class="navbar-trans"> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 

    $(window).scroll(function() { 
     //if you hard code, then use console 
     //.log to determine when you want the 
     //nav bar to stick. 
     console.log($(window).scrollTop()) 
    if ($(window).scrollTop() > 280) { 
     $('#nav').removeClass('navbar-trans').addClass('navbar-fixed'); 
    } 
    if ($(window).scrollTop() < 281) { 
     $('#nav').removeClass('navbar-fixed').addClass('navbar-trans'); 
    } 
    }); 
}); 
</script> 

Answer 1

eine CSS-Übergang

#nav { 
    transition: opacity 0.25s; 
} 

.navbar-fixed { 
    opacity: 0.75 
} 

.navbar-trans { 
    opacity: 1; 
} 

Answer 2

Verwendung Ab @realseanp sagt CSS-Übergänge würden schön hier arbeiten. Wahrscheinlich möchten Sie jedoch den Übergang auf die Hintergrundfarbe des Navs und nicht auf die Deckkraft anwenden.

#nav { 
    transition: background-color 0.3s ease; 
    background-color: rgba(255,255,255,0); 
} 
#nav.navbar-fixed { 
    background-color: rgba(255,255,255,1); 
} 

Here's eine Geige zu demonstrieren. Nach einer Wartezeit von 1 Sekunde wird die Klasse "fixed" auf das Nav angewendet.