开发者问题收集

滚动时更改导航栏颜色

2016-10-01
11366
javascript jquery html css

我刚刚用纯 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>
3个回答

如果您使用的是纯 javascript :

Firefox 和 IE 在 html 处溢出，而 Chrome、Safari 和 Opera 将其放在 body 级别:

有关详细信息，请参阅 此处 ：

var body = document.body; // For Chrome, Safari and Opera

var html = document.documentElement; // Firefox and IE places the overflow at the level, unless else is specified. Therefore, we use the documentElement property for these two browsers

因此，您必须使用这个： 

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>
kukkuz
2016-10-01
$(window).scroll(function() {
if ($(this).scrollTop() > 20){  
  $('#navBar').css({property: "value"});
    } else {
        $('#navBar').css({property: "value"});
    }
});

这实际上不是一个答案，但这在我测试过的所有浏览器上都非常有用（即 edge、safari、chrome 和 firefox）

jay stephens
2016-10-01

试试这个。将“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;
}
HTML
2016-10-01