滾動時更改導航欄顏色

我的導航欄無法更改滾動顏色，我已經在使用此腳本。請幫我滾動時更改導航欄顏色

<script> 
     $(document).ready(function(){ 
      $(window).scroll(function() { 
       if ($(document).scrollTop() > 50) { 
        $(".navbar-fixed-top").css("background-color", "#f8f8f8"); 
       } else { 
       $(".navbar-fixed-top").css("background-color", "transparent"); 
      } 
      }); 
     }); 
    </script>

我使用引導

來源

2016-11-02 Ryan Christian

你也可以添加到您的html？ – Jonas

希望這個作品，你必須使用scrollTop()才能獲得vertical scrollbar position並相應地更改了您的在這裏，div是即.navbar。

$(document).ready(function(){ 
 
\t $(window).on("scroll",function(){ 
 
    \t var wn = $(window).scrollTop(); 
 
    if(wn > 120){ 
 
    \t $(".navbar").css("background","rgba(255,0,0,1)"); 
 
    } 
 
    else{ 
 
    \t $(".navbar").css("background","rgba(1,1,1,1)"); 
 
    } 
 
    }); 
 
});

body{ 
 
    height:1600px; 
 
} 
 
.navbar{ 
 
    background:rgba(1,1,1,1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

來源

2016-11-02 08:26:18 frnt

它沒有工作。我使用RGB顏色使導航欄顏色透明 –

@Ryan它是您需要根據您的計劃更改導航欄顏色我剛剛添加了示例顏色從黑色到紅色，然後回到黑色，根據需要更改該值。 – frnt

它不起作用。你在使用teamviewer嗎？我無法解決這個問題。請幫助我 –

使用css class顏色：

.anycolor { 
    background-color: #f8f8f8"; 
}

，做與此代碼：

if ($(window).scrollTop() > 50){ 
    $('.navigation').addClass("anycolor"); 
} 
else { 
    $('.navigation').removeClass("anycolor"); 
}

來源

2016-11-02 08:13:59

它沒有工作 –

我，爲什麼你的arent使用已經帶有引導詞綴只是好奇？這裏是鏈接： http://www.w3schools.com/Bootstrap/bootstrap_affix.asp

你的情況變化

加入這一行你的導航標籤

<nav class="navbar navbar-fixed-top"data-spy="affix" data-offset-top="(scroll value)" >

和CSS

.affix.navbar{ 
background-color: color-you-prefer; 
}

來源

2016-11-02 23:37:35

滾動時更改導航欄顏色

回答

相關問題