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

Question

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

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。

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

Show or hide HTLM according to the position of the user in the page

html

javascript

scroll

show-hide