Question

我想在用户滚动特定数量的像素后更改网站导航部分的背景。我尝试了以下javascript代码，但似乎没有任何工作。分享以下的javascript。我无法弄清楚出了什么问题。 javascript似乎正在工作，但一旦遇到if条件就会停止。

function setName () {
  myNav = document.getElementById('navigation');
}

window.onscroll = function () {
  if (document.body.scrollTop > 350){
    myNav.classList.add('nav-colored');
  }
};

window.onload = setName;

Answer 1

您必须使用document.documentElement.scrollTop代替document.body.scrollTop。

...因为document.body.scrollTop不适用于Chrome，FireFox，Opera等，因为

Chrome, Firefox, IE and Opera places the overflow at the level, unless else is specified. Therefore, you have to use the documentElement property for these browsers

......它只适用于safari

因此，您必须同时编写浏览器支持。

Stack Snippet

＆＃13;

function navScroll() {
  var myNav = document.getElementById('navigation');
  if (document.documentElement.scrollTop > 350 || document.body.scrollTop > 350) {
    myNav.classList.add('nav-colored');
  }
}

window.onscroll = function() {
  navScroll();
};

＆＃13;

body {
  margin: 0;
  height: 1000px;
}

#navigation {
  height: 50px;
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

#navigation.nav-colored {
  background: blue;
}

＆＃13;

<nav id="navigation"></nav>

＆＃13;

在滚动上更改导航背景

1 个答案: