导航栏粘性在 html 中无法正常工作

Question

我有导航栏菜单。我添加了一些 javascript 代码来使这个导航栏在用户滚动页面时保持粘性。问题在于，当用户滚动页面时，它就像之前一样。它不会使导航栏变得粘稠。谁能告诉我我的代码可能有什么问题，任何帮助都会很棒。这是我的代码：window.onscroll = function() {  seeFunction()};// Get the navbarvar navbar = document.getElementById("thor");// Get the offset position of the navbarvar sticky = navbar.offsetTop;// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll positionfunction seeFunction() {  if (window.pageYOffset >= sticky) {    navbar.classList.add("sticky")  } else {    navbar.classList.remove("sticky");  }}<div id="thor" class="ttm-header-wrap">  <!-- ttm-stickable-header-w -->  <div id="ttm-stickable-header-w" class="ttm-stickable-header-w clearfix">    <div id="site-header-menu" class="site-header-menu">      <div class="site-header-menu-inner ttm-stickable-header">        <div class="container">          <!-- site-branding -->          <div class="site-branding">            <a class="home-link" href="index.html" title="Planwey" rel="home">              <img id="logo-img" class="img-center" src="TEIA png big.png" alt="logo-img">            </a>          </div>          <!-- site-branding end -->          <div id="site-navigation" class="site-navigation">            <div class="ttm-menu-toggle">              <input type="checkbox" id="menu-toggle-form" />              <label for="menu-toggle-form" class="ttm-menu-toggle-block">

Answer 1

使用 css 代替 js position: sticky

#thor {

    position: sticky;

    top: 0;

}