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

Question

我有导航栏菜单。我添加了一些 javascript 代码来使这个导航栏在用户滚动页面时保持粘性。问题在于，当用户滚动页面时，它就像之前一样。它不会使导航栏变得粘稠。

谁能告诉我我的代码可能有什么问题，任何帮助都会很棒。

这是我的代码：

window.onscroll = function() {

  seeFunction()

};

// Get the navbar

var navbar = document.getElementById("thor");

// Get the offset position of the navbar

var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position

function 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 {&nbsp; &nbsp; position: sticky;&nbsp; &nbsp; top: 0;}