如何淡入/淡出導航欄，滾動後會得到修復？

Question

到目前爲止，當你登陸頁面時，我有一個透明背景的導航欄。經過一定的滾動閾值後，它會得到導航欄固定的類，這將使導航欄固定並改變外觀。

但是，我希望它在出現時具有平滑淡入和淡出效果（並且當您再次向上滾動時，消失）。

我怎麼能做到這一點？ jquery fadeIn和fadeOut不起作用，因爲它實際上完全隱藏了帶有fadeOut的導航欄。

<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

使用CSS過渡

#nav { 
    transition: opacity 0.25s; 
} 

.navbar-fixed { 
    opacity: 0.75 
} 

.navbar-trans { 
    opacity: 1; 
} 

Answer 2

由於@realseanp說，CSS轉換將很好地在這裏工作。但是，您可能希望將轉換應用於導航的背景顏色而不是不透明度。

#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小提琴演示。 1秒超時後，「固定」類將應用於導航。