滾動後更改導航欄背景顏色

我的導航欄具有透明背景，我想在用戶向下滾動時添加不同的BG。滾動後更改導航欄背景顏色

我使用的代碼來自這個問題：Changing nav-bar color after scrolling?

現在我的代碼如下所示：

$(document).ready(function(){ 
var scroll_start = 0; 
var startchange = $('#startchange'); 
var offset = startchange.offset(); 
if (startchange.length){ 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if(scroll_start > offset.top) { 
      $(".navbar-fixed-top").css({'background-color':'#24363d', 
             'opacity': '0.3'}); 
     } else { 
      $('.navbar-fixed-top').css({'background-color':'transparent'}); 
     } 
    }); 
} 
});

當我向下滾動，一切正常確定，BG和透明度適用，但是當我回滾到頂部，這種風格仍然存在。我希望它變回沒有背景的默認樣式。

謝謝

來源

2016-12-15 PapT

的可能的複製[更改導航欄顏色後滾動？]（http://stackoverflow.com/questions/23706003/changing -nav-bar-color-after-scroll） – Sam

當向下滾動時向下滾動並刪除該類時，最好添加一個新類。並添加新的CSS類。

if(scroll_start > offset.top) { 
     $(".navbar-fixed-top").addClass("fixednav"); 
    } else { 
     $('.navbar-fixed-top').removeClass("fixednav"); 
    }

CSS：

.navbar-fixed-top.fixednav{ 
     background:#24363d; 
     opacity:0.3; 
    }

來源

2016-12-15 10:40:01 Taniya

其實這對我有用。非常感謝。 – PapT

ü歡迎@PapT :) – Taniya

正如他們所說的，不要只是尋找正確的答案，而是要找出你做錯了什麼，並從中吸取教訓。在我的答案中看到你的錯誤。 –

在其他部分，你不需要花括號

$(document).ready(function(){ 
var scroll_start = 0; 
var startchange = $('#startchange'); 
var offset = startchange.offset(); 
if (startchange.length){ 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if(scroll_start > offset.top) { 
      $(".navbar-fixed-top").css({'background-color':'#24363d', 
             'opacity': '0.3'}); 
     } else { 
      $('.navbar-fixed-top').css('background-color':'transparent'); 
     } 
    }); 
} 
});

來源

2016-12-15 10:56:04

試試這個

  <script> 
$(document).ready(function(){ 
    $(window).scroll(function(){ 
    var scroll = $(window).scrollTop(); 
     if (scroll > 54) { 
     $(".navbar-fixed-top").css("background" , "blue"); 
     } 

     else{ 
      $(".navbar-fixed-top").css("background" , "white"); 
     } 
    }) 
}) 
     </script>

來源

2017-05-17 09:28:58

滾動後更改導航欄背景顏色

回答

相關問題