Question

我只是用纯javascript这样做来滚动后更改导航栏颜色，它与谷歌铬合作没有任何问题但是当我试图在Firefox上测试它时它没有使用它。

任何人都可以给我任何建议吗？提前致谢。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果您使用纯javascript ：

Firefox和IE在html有溢出，而Chrome，Safari和Opera将其置于body级别：

有关详细信息，请参阅here：

var body = document.body; //适用于Chrome，Safari和Opera

var html = document.documentElement; // Firefox和IE将溢出放在    等级，除非另有说明。因此，我们使用   这两个浏览器的documentElement属性

所以你必须使用它：

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

它将跨浏览器工作。干杯！

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您使用的是jquery ：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

不是一个真正的答案，但在我测试过的所有浏览器中，这对我来说都很有用（例如，edge，safari，chrome＆amp; 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;
}

滚动时更改导航栏颜色

3 个答案: