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">
<span class="toggle-block toggle-blocks-1"></span>
 <span class="toggle-block toggle-blocks-2"></span>
 <span class="toggle-block toggle-blocks-3"></span>
 </label>
            </div>
            <nav id="menu" class="menu">
              <ul id="modify" class="dropdown">
                <li class="active"><a href="index.html">Home</a>

                </li>
                <li><a href="#">About</a>
                  <ul>
                    li><a href="about-us.html">TEIA</a></li>
                <li><a href="services-1.html">Board Members</a></li>
                <li><a href="services-2.html">Agenda</a></li>
                <li><a href="our-event.html">Vision & Mission</a></li>

                </ul>
                </li>
                <li><a href="#">Members</a>
                  <ul>

                    <li><a href="portfolio-overlay.html">Membership Type</a></li>
                    <li><a href="portfolio-classic.html">Code of Conduct</a></li>
                    <li><a href="portfolio-overlay.html">Membership Benefits</a></li>
                    <li><a href="portfolio-classic.html">Register/Join</a></li>
                  </ul>
                </li>
                <li><a href="#">Resources</a>
                  <ul>
                    <li><a href="blog.html">Upcoming Events</a></li>
                    <li><a href="blog-grid.html">Previous Events</a></li>
                    <li><a href="single-blog.html">Press Release</a></li>
                    <li><a href="single-blog.html">Gallery</a></li>
                  </ul>
                </li>
                <li><a href="contact-us.html">Contact Us</a></li>
                <li class="nyan" style="background-color: #00bfff; color: white !important; "><a href="#">Log In</a>
                  <ul>
                    <li class="sss"><a href="admin">Admin</a></li>
                    <li><a href="members">Member</a></li>

                  </ul>
                </li>
              </ul>
            </nav>
          </div>
          <!-- site-navigation end-->
        </div>
      </div>
    </div>
  </div>
</div>

我有一个内置的粘性滚动滚动js代码，我删除了它是因为我不希望导航栏缩小，如下所示：

$(window).scroll(function(){
    if ( matchMedia( 'only screen and (min-width: 1200px)' ).matches ) 
    {
        if ($(window).scrollTop() >= 30 ) {
            $('.ttm-stickable-header').addClass('fixed-header');
            $('.ttm-stickable-header').addClass('visible-title');
        }
        else {

            $('.ttm-stickable-header').removeClass('fixed-header');
            $('ttm-stickable-header').removeClass('visible-title');
            }
    }
});

Answer 1

代替CSS使用CSS position: sticky

#thor {
    position: sticky;
    top: 0;
}

来源：UPnP architecture document

Answer 2

使用此CSS

.sticky{
   position: fixed;
   top: 0;
   left:0;
   width:100%;
}

window.onscroll = function() {myFunction()};

var header = document.getElementById("thor");
var sticky = header.offsetTop;

function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

<div class="top-container">
  <h1>Scroll Down</h1>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div class="header" id="thor">
  <h2>My Header</h2>
</div>

<div class="content">
  <h3>On Scroll Sticky Header</h3>
  <p>The header will stick to the top when you reach its scroll position.</p>
  <p>Scroll back up to remove the sticky effect.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  
</div>

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

2 个答案: