Question

我是html / css和javascript的新手，但我必须为学校项目创建一个简单的网站。我意识到了我想要的大部分内容，但我真的想添加一个额外的元素。

我有一个相对位置前500px的水平菜单，当人们向下滚动页面并回到人们回到顶部时，我希望它移动到70px的固定位置页。我怎么能这样做？

这是我的菜单代码：

<header id="headermenu">
    <header id="blockMenu">

                <nav class="menuMain">
                    <ul>
                        <h2 style="font-size:small; font-weight:normal;"><li class="first"><a href="#jonction"><span>♢</span> JONCTION <span>♢</span></a></li>
                        <li><a href="#appropriation"><span>♢</span> APPROPRIATION <span>♢</span></a></li>
                        <li><a href="#partage"><span>♢</span> PARTAGE <span>♢</span></a></li>
                        <li><a href="#info"><span>♢</span> Sur le projet <span>♢</span></a></li></h2>
                    </ul>
                </nav>   
    </header>
</header>

所以，这就是我现在所做的：

<script>

window.onscroll=function(){changeMenu()}

function changeMenu()
{
x=document.getElementById("blockMenu");
x.style.position = "fixed";
x.style.top = "70px";
}

</script>

<!-- END JS -->


    <header id="headermenu">
        <header id="blockMenu">

                    <nav class="menuMain">
                        <ul>
                            <h2 style="font-size:small; font-weight:normal;"><li class="first"><a href="#jonction"><span>♢</span> JONCTION <span>♢</span></a></li>
                            <li><a href="#appropriation"><span>♢</span>APPROPRIATION<span>♢</span></a></li>
                            <li><a href="#partage"><span>♢</span> PARTAGE <span>♢</span>/a></li><li><a href="#info"><span>♢</span>Sur le projet<span>♢</span></a></li></h2>
                        </ul>
                    </nav>   
        </header>
    </header>

onscroll工作得很完美，但我仍然不知道如何告诉他当人们回到页面顶部（是一个长向下滚动的页面）时，菜单必须回到原来的位置

有什么建议吗？

我知道我听起来像个完全白痴，但是嘿......所以这就是基于小提琴的所作所为，但没有任何作品......我写错了什么或者我真的不明白这个原则吗？

<script>

window.onscroll=function(){changeMenu()}

function changeMenu()
{
var scrollBarPosition = window.pageYOffset | document.body.scrollTop;

if(scrollBarPosition == 0) {
    document.getElementById('blockMenu').style.position = "relative" +      document.getElementById('blockMenu').style.top = "500px";
}
else {
    document.getElementById('blockMenu').style.position = "fixed" +    document.getElementById('blockMenu').style.top = "70px";
}
}
</script>

Answer 1

您必须向文档（DOM）添加javascript处理程序。有一个识别滚动事件的处理程序。 window.onscroll = yourFunction;。在yourFunction中，您可以读取当前滚动条位置的文档，然后相应地更改菜单的属性。希望这会让你更进一步。如果没有，请发布您在javascript中已经尝试过的尝试，以便更轻松地提供帮助。

Javascript条件在向下滚动时更改菜单位置

1 个答案: