Question

我正在尝试制作一个导航栏，当用户向下滚动时它会淡入。现在，当用户向下滚动时，我只是试图让它做任何事情，因为我试图做一些脚本，但是它没有用。

我在HTML文档中引用了这样的脚本：

<body onload-src="nav.js">

这是我的剧本：

  function nav() {  
    if (window.pageYOffset > 500) {
      document.getElementById("scrollnav").style.visibility="invisible";
    }
    else {
      document.getElementById("scrollnav").style.visibility="visible";
    }
  }

非常感谢任何帮助！我知道很多人都问过这样的问题，但我真的很想知道我在这里做错了什么。

Answer 1

invisible不是visibility的有效值。

您可能想要的是hidden：

document.getElementById("scrollnav").style.visibility="hidden";

Here is a reference

在访问style属性之前，您还应该确保该元素实际存在。它似乎并不重要，但如果您打算在可预见的未来使用该代码，那么您很可能会在某些时候遇到错误。

function nav() {  
    var elem = document.getElementById("scrollnav");
    if ( ! elem) {
        console.warn("#scrollnav was not found on the page");
        return;
    }
    if (window.pageYOffset > 500) {
        elem.style.visibility="invisible";
    } else {
        elem.style.visibility="visible";
    }
}

滚动上的隐形div

1 个答案: