滾動時更改導航欄顏色

Question

我只是用純JavaScript做到了這一點，即可在滾動后更改導航欄的顏色，它可以與谷歌瀏覽器一起使用而沒有任何問題，但是當我嘗試在firefox上對其進行測試時，它就無法使用。

有人可以給我任何建議嗎？ 提前致謝。

 var myNav = document.getElementById("nav"); window.onscroll = function () { "use strict"; if (document.body.scrollTop >= 280) { myNav.classList.add("scroll"); } else { myNav.classList.remove("scroll"); } }; 

 body { margin:0; padding:0; height:4000px; } .nav { position:fixed; width:100%; height:60px; background-color:#111; transition:all .5s ease-in-out; } .scroll { background-color:transparent; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav" class="nav"></div> 

Answer 1

如果您使用的是純javascript ：

Firefox和IE在html溢出，而Chrome，Safari和Opera則將其置於body ：

請參閱此處以獲取更多信息：

var body = document.body; //對於Chrome，Safari和Opera

var html = document.documentElement; //除非另外指定，否則Firefox和IE會將溢出置於該級別。 因此，我們為這兩個瀏覽器使用documentElement屬性

因此，您必須使用以下代碼：

if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) {

它將可以跨瀏覽器工作。 干杯!

 var myNav = document.getElementById("nav"); window.onscroll = function() { "use strict"; if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) { myNav.classList.add("scroll"); } else { myNav.classList.remove("scroll"); } }; 

 body { margin: 0; padding: 0; height: 4000px; } .nav { position: fixed; width: 100%; height: 60px; background-color: #111; transition: all .5s ease-in-out; } .scroll { background-color: transparent; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav" class="nav"></div> 

如果您使用的是jquery ：

 var myNav = $("#nav"); $(window).on('scroll', function() { "use strict"; if ($(window).scrollTop() >= 280) { myNav.addClass("scroll"); } else { myNav.removeClass("scroll"); } }); 

 body { margin: 0; padding: 0; height: 4000px; } .nav { position: fixed; width: 100%; height: 60px; background-color: #111; transition: all .5s ease-in-out; } .scroll { background-color: transparent; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav" class="nav"></div> 

Answer 2

$(window).scroll(function() {
if ($(this).scrollTop() > 20){  
  $('#navBar').css({property: "value"});
    } else {
        $('#navBar').css({property: "value"});
    }
});

並不是一個真正的答案，但這對我測試過的所有瀏覽器（例如Edge，Safari，Chrome和Firefox）都非常有用

Answer 3

嘗試這個。 在導航欄背景顏色變為透明之前，將“ 280”更改為要向下滾動多少px。

HTML：

<div id="navbar"></div>

JavaScript：

$(function() {
 $(window).on("scroll", function() {
    if($(window).scrollTop() > 280) {
        //background on scroll
        $("#navbar").addClass("scroll");
    } else {
        //background at top
       $("#navbar").removeClass("scroll");
    }
  });
});

CSS：

#navbar {
background-color:#111;
transition:all .5s ease-in-out;
}
.scroll {
background-color:transparent;
}