导航栏应该只在我滚动时显示，但在我刷新页面时已经可见，然后在滚动时消失答案

【问题标题】：The navigation bar should only show when I scroll, but is already visible when I refresh the page, then disappears when scrolling导航栏应该只在我滚动时显示，但在我刷新页面时已经可见，然后在滚动时消失
【发布时间】：2021-08-19 06:44:25
【问题描述】：

我正在创建一个页面，其中导航栏应仅在滚动几千像素后出现。但是当我刷新浏览器时，导航栏首先出现，然后在我开始滚动时消失。之后，一切都按预期工作。

如何在页面刷新时隐藏栏？

这里是我用过的JS代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function(){$(window).scroll(function(){
            if( $(this).scrollTop() > 4000){
              $('#navigation').fadeIn( "slow", "linear" )
            } else {
              $('#navigation').fadeOut( "slow", "linear" )
            }
          })
        })
     </script>

这里是我使用的 CSS 代码：

nav ul {
        position:fixed;
        list-style: none;
        width: 1100px;
        height: 40px;
        margin: 30px 222px auto;
        padding: 20px 20px 20px 20px;
        background-color: #798c39;
        text-align: center;
        }

【问题讨论】：

您可以尝试最初读取scrollTop 值并根据该值显示导航栏。
设置#navigation { display: none; }

标签： javascript html css navigationbar

【解决方案1】：

也许尝试其他方式。我建议不要使用 jquery 做所有事情，而是使用纯 javascript 和 css。这种方法效率更高，效果更好。

const nav = document.querySelector('#navigation');

function showNav(){
    nav.classList.add('show');
}

function hidewNav(){
    nav.classList.remove('show');
}
var currPos = window.scrollY;
document.addEventListener('scroll', () => {
  if (window.scrollY < currPos) {
  //scroll up
    hidewNav();
  } else {
  //scroll down
    showNav();
  }
  currPos = window.scrollY;
});

body {
  margin: 0;
  height: 2000px;
  margin-top: 100px;
}

nav {
  position: fixed;
  list-style: none;
  width: 100%;
  height: 70px;
  top: 0;
  margin: 0;
  background-color: #798c39;
  text-align: center;
  transform: translateY(-100px);
  transition: 0.3s;
}

.show {
  transform: translateY(0);
}

<html>
  <head>

  </head>
  <body>
    <header>
      <nav id="navigation">
        <ul>

        </ul>
      </nav>
    </header>
    <main>
   
    </main>
  </body>
</html>

【讨论】：

【解决方案2】：

这取决于导航栏的空间是否在加载时为其保留。

我怀疑它是给定您显示的 JS，在这种情况下，您需要确保它具有 opacity: 0 on load。

对代码的唯一更改是在样式表中添加：

nav {
  opacity: 0;
}

这是假设淡入/淡出关键帧只是改变不透明度。例如，它们也会改变某些维度，这也需要迎合。或许您可以向我们展示这些关键帧以便我们检查？

【讨论】：