粘性 header 導航菜單，當我向下滾動頁面時，頂部有間隙

Question

我的粘性導航欄有一點問題。

我在導航欄上方有一個關注我們的部分，我想要做的是，如果用戶滾動，導航欄會重新回到頁面頂部。 最初我不能設置 top:0 因為它會覆蓋跟隨我們。 所以我需要它滾動一次。

解釋它的最好方法是通過這個 w3 學校示例，其中 header 在滾動經過上述內容后會粘住：

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky

如果您查看下面的屏幕截圖，我嘗試按照上面的示例進行操作，但對我不起作用。

這是初始頁面加載，在頁面頂部關注我們。

我滾動的那一刻，您可以看到上面有一個間隙。

HTML：

<header id="site-header" class="header-footer-group _mPS2id-t mPS2id-target mPS2id-target-first mPS2id-target-last" role="banner">
...
            
</header>

Javascript：

<head>
<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("site-header");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>
</head>

CSS：

#site-header{
    opacity: 0.9;
    width:100% !important;
    z-index:99999;
  position:fixed;
}

Answer 1

請使用此 CSS

.sticky {position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

粘性 header 導航菜單，當我向下滾動頁面時，頂部有間隙

問題描述

1 個解決方案

解決方案1
2 已采納 2020-12-21 13:02:34

粘性 header 導航菜單，當我向下滾動頁面時，頂部有間隙

問題描述

1 個解決方案

解決方案1 2 已采納 2020-12-21 13:02:34

解決方案1
2 已采納 2020-12-21 13:02:34