每次加载页面时都会加载element.style，但它应该在window.onscroll上运行

Question

我正试图制作一个网页，其中顶部导航栏隐藏在滚动和显示在滚动上。我正在使用下面给出的代码来这样做。

<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top" id='navHeader'>
     
<!-- all the elements of navbar like logo and menu goes here-->

    </nav> <!-- end of navbar -->
    <!-- end of navigation -->
    <script>
    var header=document.getElementById("navHeader");
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
    navHeader.style.top = "0";
    } else {
    navHeader.style.top = "-50px";
    }
    prevScrollpos = currentScrollPos;
    }
    </script>

但问题是element.style应该在滚动网页时加载。但是它最初是在打开网页时加载的，而导航条最初是不可见的。当网页向下滚动，然后再次向上滚动时，导航条是可见的。

下面给出的图片也可以帮助您

在内心深处和向下滚动

​

翻滚

​

但是，当第一次加载页面时，除非滚动，否则不应该有任何element.style。

那么，为什么会发生这种情况，我如何解决它。

谢谢你提前提供帮助。

Answer 1

我认为这很简单:只需在滚动事件之前添加这段代码

navHeader.style.top = "0"；

有些事情是这样的：

<script>
    var header=document.getElementById("navHeader");
    navHeader.style.top = "0";//Please add this new line
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
    navHeader.style.top = "0";
    } else {
    navHeader.style.top = "-50px";
    }
    prevScrollpos = currentScrollPos;
    }
    </script>

Answer 2

我看到的主要问题是，您将变量header设置为带有id navHeader的元素，但随后尝试在navHeader变量上设置样式，这是您尚未定义的。如果改为更改对header的引用，它是否有效？