更改导航栏的颜色，同时滚动

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