導航欄應該只在我滾動時顯示，但當我刷新頁面時已經可見，然后在滾動時消失

Question

我正在創建一個頁面，導航欄只應在滾動幾千像素后出現。 但是當我刷新瀏覽器時，導航欄首先出現並在我開始滾動時消失。 之后一切都按預期工作。

如何在刷新頁面時隱藏欄？

這是我使用的 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;
        }

Answer 1

也許嘗試另一種方式。 我建議使用純 javascript 和 css，而不是用 jquery 做所有事情。這種方法更有效，效果更好。

 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>

Answer 2

這取決於是否在加載時為其保留導航欄的空間。

我懷疑它已提供您顯示的 JS，在這種情況下，您需要確保它的不透明度：加載時為 0。

對代碼的唯一更改是在樣式表中添加：

nav {
  opacity: 0;
}

這是假設 fadeIn/fadeOut 關鍵幀只是改變不透明度。 如果他們也改變了一些維度，例如，那也需要迎合。 也許您可以向我們展示那些關鍵幀，以便我們進行檢查？

導航欄應該只在我滾動時顯示，但當我刷新頁面時已經可見，然后在滾動時消失

問題描述

2 個解決方案

解決方案1
1 已采納 2021-08-19 08:11:19

解決方案2
0 2021-08-19 07:49:33

導航欄應該只在我滾動時顯示，但當我刷新頁面時已經可見，然后在滾動時消失

問題描述

2 個解決方案

解決方案1 1 已采納 2021-08-19 08:11:19

解決方案2 0 2021-08-19 07:49:33

解決方案1
1 已采納 2021-08-19 08:11:19

解決方案2
0 2021-08-19 07:49:33