粘性标题导航菜单，当我向下滚动页面时，顶部有间隙

Question

我的粘性导航栏有点问题。

我在导航栏上方有一个关注我们的部分，我想要做的是，如果用户滚动，导航栏会重新回到页面顶部。最初我不能设置 top:0 因为它会覆盖跟随我们。所以我需要它滚动一次。

解释它的最好方法是通过这个 w3 学校示例，其中标题在滚动经过上述内容后会粘住：

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;
}