为什么Window.scroll功能行动很奇怪

我对编码和所有内容都非常新鲜，但对从教程和所有内容中的所有内容都有很好的了解。

有人向下滚动时，我试图使此徽标更改。它正在工作，但是我试图弄清楚为什么当页面首次加载并向下滚动时，它在一开始就快速切换了类。它只是在一开始就可以做到，但是之后它可以正常工作。

有任何提示或建议吗？谢谢！

window.onscroll = function() {
  navScroll()
};
function navScroll() {
  var logoNav = document.getElementById("bgNav");
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    logoNav.className = "play";
  } else {
    logoNav.className = "playBack";
  }
}

@charset "UTF-8";
.container {
  height: 2000px;
  background-color: #c3c3c3;
}
@keyframes play60 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -30000px 0px;
  }
}
@keyframes play60Back {
  0% {
    background-position: -30000px 0px;
  }
  100% {
    background-position: 0 0;
  }
}
#bgNav.play {
  animation-name: play60;
  animation-fill-mode: forwards;
}
#bgNav.playBack {
  animation-name: play60Back;
  animation-fill-mode: forwards;
}
#bgNav {
  height: 117px;
  width: 500px;
  position: fixed;
  animation-duration: 2000ms;
  animation-timing-function: steps(60);
  background-repeat: no-repeat;
  background-image: url("https://metro1.000webhostapp.com/metro-nav-animated.svg");
}

<!DOCTYPE html>
  <html>
  <body>
  <div class="container">
    <div class="" id="bgNav"></div>
  </div>
  </body>
  </html>

这可以正常工作

} else if(logoNav.className === "play") {
    logoNav.className = "playBack";
}

window.onscroll = function() {
  navScroll()
};
function navScroll() {
  var logoNav = document.getElementById("bgNav");
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    logoNav.className = "play";
  } else if(logoNav.className === "play") {
    logoNav.className = "playBack";
  }
}

@charset "UTF-8";
.container {
  height: 2000px;
  background-color: #c3c3c3;
}
@keyframes play60 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -30000px 0px;
  }
}
@keyframes play60Back {
  0% {
    background-position: -30000px 0px;
  }
  100% {
    background-position: 0 0;
  }
}
#bgNav.play {
  animation-name: play60;
  animation-fill-mode: forwards;
}
#bgNav.playBack {
  animation-name: play60Back;
  animation-fill-mode: forwards;
}
#bgNav {
  height: 117px;
  width: 500px;
  position: fixed;
  animation-duration: 2000ms;
  animation-timing-function: steps(60);
  background-repeat: no-repeat;
  background-image: url("https://metro1.000webhostapp.com/metro-nav-animated.svg");
}

<!DOCTYPE html>
  <html>
  <body>
  <div class="container">
    <div class="" id="bgNav"></div>
  </div>
  </body>
  </html>

相关内容

最新更新

热门标签：