根据用户在页面中的位置显示或隐藏 HTML

Question

我想在我的网站上创建一个水平导航栏。 我也希望它“动态地”出现和消失， 根据用户在页面中的位置，但我无法做到 正确地做。这是我的代码：

HTML：

<script src='scripts/navbar.js'></script>
<ul id="navbar" onscroll="showHideNavbar();">
    <li>LOGOHERE</li>
    <li><a id="home-link-navbar">Home</a></li>
    <li><a id="projects-link-navbar">Projects</a></li>
    <li><a id="about-link-navbar">About</a></li>
    <li><a id="contact-link-navbar">Contact</a></li>
</ul>
<script type="text/javascript">
    showHideNavbar();
</script>

和 navbar.js 中的 JS：

function showHideNavbar()
{
    console.log(window.pageXOffset);
    if(window.pageXOffset < 1000){
        document.getElementById("navbar").style.opacity = 0;
    }
    if(window.pageXOffset > 1000 && window.pageXOffset < 2000){
        document.getElementById("navbar").style.opacity = window.pageXOffset/10000*5;
    }
    else{
        document.getElementById("navbar").style.opacity = 1;
    }
}

你能帮帮我吗？

Answer 1

您需要定期调用此函数，但您只需执行一次。

使用setInterval() 进行操作

<script type="text/javascript">
    setInterval(showHideNavbar,100);
</script>

另外，pageXOffset 是水平偏移量，但您似乎想要pageYOffset。