navbar不透明/ rgba滾動更改

我一直在嘗試創建一個在頂部透明的導航欄，並在用戶向下滾動頁面時獲得白色。我的標題高度爲800px，我希望我的導航在800px之後失去100％的透明度。 Here`s我的代碼：navbar不透明/ rgba滾動更改

<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不透明度爲好。 Here`s的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")');

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

來源

2016-08-02 Liondj

這是一個重複的問題。請檢查http://stackoverflow.com/questions/29646622/set-bootstrap-navbar-transparency-on-scroll –

它實際上不是。 http://stackoverflow.com/questions/29646622/set-bootstrap-navbar-transparency-on-scroll 他問如何添加或刪除類滾動，而即時通訊試圖編輯導航不透明時滾動，有差異 – Liondj

你hav e發opacity不是字符串，但變量navOpacity已成爲string。那是錯誤的。其他一切工作正常。 :)

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

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

Working example.

來源

2016-08-02 07:10:58 eisbehr

謝謝，這解決了我的一半問題：D – Liondj

在你的代碼的問題是，你提供navOpacity作爲一個字符串css()，而不是變量本身。試試這個：

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

另外請注意，您目前的邏輯是倒退到你形容爲你的目標（標題開始透明，並在800像素變得不透明）和邏輯也可以簡化很多。試試這個：

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

Working example

來源

2016-08-02 07:15:43

而'opacity'應該是一個字符串。 – eisbehr

@eisbehr謝謝 –

@RoryMcCrossan感謝您的建議，但錯誤是，就像您所說的那樣，我沒有將不透明作爲字符串使用，並將我的變量名用作stirng，並且出錯了，但修復後我的代碼正常工作。 – Liondj

或者，你可以使用jQuery方法.fadeTo()而不是css('opacity')。這種方法可以平滑地動畫元素的不透明度。與即時不透明度變化相比，使用起來更容易，動畫效果非常好。

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

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

來源

2016-08-02 07:20:55

navbar不透明/ rgba滾動更改

回答

相關問題