更改導航欄的顏色，同時滾動

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：

火狐和IE瀏覽器在html溢出，而瀏覽器，Safari和Opera將其置於body級別：

見here更多信息：

VAR體= 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"}); 
    } 
}); 

不是一個真正的答案，但是這是我的（即邊緣，野生動物園，鉻& Firefox）的所有測試的瀏覽器對我的作品很大

Answer 3

試試這個。在導航欄背景顏色變爲透明之前，將「280」更改爲您要滾動的像素數。

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; 
}