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。

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

1 个答案: