我的 else 语句无法正常工作 JS

Question

关于我

我的项目

关于我的工作

联系我

这是我的 div 的样式

   nav-pc {
    background-color: black;
    font-weight: bold;
    position: relative;
    top: 0;
    width: 100%;
}

//第一部分效果很好，所以当我滚动超过导航栏后，它就变成了固定的。 //但是当我返回页面顶部时，它不会将“固定”替换为“相对” //正如它应该的那样，并且栏保持固定。

   window.onscroll = function() {

    var navbar = document.getElementById('nav-pc');
    var nav_position = navbar.offsetTop;

    if (window.pageYOffset >= nav_position) {
    navbar.style.position = "fixed";
  } else {
    navbar.style.position = "relative";
  }
}

Answer 1

这是因为在它被修复后，新的navposition 将无限期地为 0。要解决这个问题，请将变量 var nav_position 放在函数之外，这样它就不会在你的应用程序的执行过程中发生变化。

var navbar = document.getElementById('nav-pc');
var nav_position = navbar.offsetTop; // set once, and won't ever change

window.onscroll = function() {
  if (window.pageYOffset >= nav_position) {
    navbar.style.position = "fixed";
  } else {
    navbar.style.position = "relative";
  }
}