element.style 在页面加载时加载，但它应该在 window.onscroll 上运行答案

【问题标题】：element.style loading whenever the page is loaded but it is supposed to function on window.onscrollelement.style 在页面加载时加载，但它应该在 window.onscroll 上运行
【发布时间】：2020-09-13 04:55:16
【问题描述】：

我正在尝试制作一个网页，其中顶部导航栏在向下滚动时隐藏并在向上滚动时显示。我正在使用下面给出的代码来执行此操作。

<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。

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

感谢您提前提供的任何帮助。

【问题讨论】：

这能回答你的问题吗？ $(window).scroll() firing on page load

标签： javascript html css

【解决方案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>

【讨论】：

【解决方案2】：

我看到的主要问题是您将变量 header 设置为 ID 为 navHeader 的元素，但随后您尝试在 navHeader 变量上设置样式，而您没有t 定义。如果您将这些引用改为header，它会起作用吗？

【讨论】：

您能否提供您所建议的代码 sn-p？
当然——我认为它应该是这样的：<script>var header=document.getElementById("navHeader"); ... if (prevScrollpos > currentScrollPos) { header.style.top = "0"; } else { header.style.top = "-50px"; }