導航欄不透明度/滾動更改

Question

我一直在嘗試創建一個導航欄，該導航欄在頂部是透明的，並且在用戶向下滾動頁面時將獲得白色。 我的標題高度為800px ，但我希望導航器在這些800px之后失去100％的透明度。 這是我的代碼：

<header id="header">
   <nav class="navbar">
       <ul class="navigation">
           <li><a href="#header">Home</a></li>
           <li><a href="">About us</a></li>
           <li><a href="">Our qualities</a></li>
           <li><a href="">Contact us</a></li>
           <li><a href="">contact us</a></li>
       </ul>
   </nav>

nav  {
    width: 1600px;
    position: fixed;
    top: 0; 

    ul {
        margin: 0 auto;

        li {
            display: inline-block;
            padding: 5px 20px;

            a {
                font-family:  $f1;
                font-size: 16pt;
                color: $c3;
            }
        }
    }
}
}

首先，我嘗試使用不透明度，但是它不起作用，並且在那個子元素（ ul和li ）之上，不透明度也為0。 這是為此的JS：

jQuery(document).ready( function() {        
    var navOffset = jQuery("nav").offset().top;

    jQuery(window).scroll(function() {
        var scrollPos = jQuery(window).scrollTop();
        var navOpacity = scrollPos /800;
        jQuery('.navbar').css(opacity, 'navOpacity');

        if (jQuery('nav').css('opacity') < 1) {
            jQuery('.navigation').css('opacity', '1')  
        };

然后我嘗試在滾動上更改RGBA值，但也沒有用

jQuery('.navbar').css( opacity, 'navOpacity' ); 

我用了

jQuery('.navbar').css(backgroundcolor, 'rgba (255, 255, 255, + "navOpacity")');

那也失敗了，所以，我不得不問你也幫我

Answer 1

您已將opacity不是字符串，但是變量navOpacity已變為string 。 錯了 總體而言，其他所有工作都很好。 :)

// change
$('.navbar').css(opacity, "navOpacity");

// to
$('.navbar').css("opacity", navOpacity);

工作示例。

Answer 2

代碼中的問題是，您將navOpacity作為字符串提供給css() ，而不是變量本身。 嘗試這個：

$('.navbar').css('opacity', navOpacity);

還要注意，您當前的邏輯倒退至您所描述的目標（標頭開始透明，在800px處變為不透明），並且邏輯也可以簡化很多。 嘗試這個：

$(window).scroll(function() {
    var pc = $(this).scrollTop() / 800;
    $('.navbar').css('opacity', 1 - pc);
});

工作實例

Answer 3

或者，您可以使用jquery方法.fadeTo()代替css('opacity') 。 此方法可平滑地使元素的不透明度動畫化。 與即時不透明度更改相比，它更易於使用，並且動畫外觀也不錯。

jQuery('.navbar').fadeTo( "slow" , navOpacity);

if (jQuery('nav').css('opacity') < 1) {
  jQuery('.navigation').fadeTo( "slow" , 1);
};