javascript - 当导航栏位于屏幕顶部时的 Jquery 变得粘滞不工作-6ren

javascript - 当导航栏位于屏幕顶部时的 Jquery 变得粘滞不工作

转载作者：行者123 更新时间：2023-11-27 23:33:02

我试图让导航栏(位于幻灯片前面)在到达页面顶部时变得粘滞。当它接近顶部时，它会稍微向下跳(在幻灯片下方)并且不会粘在屏幕顶部。

我对 Jquery 非常缺乏经验，所以没有尝试过任何不同的方法。

$(document).ready(function() {
  var stickyNavTop = $('nav').offset().top;
  console.log("work");
  var stickyNav = function() {
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop) {
      $('nav').addClass('sticky');
    } else {
      $('nav').removeClass('sticky');
    }
  };

  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  });
});

.sticky {
  position: sticky;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

.navbar {
  background-color: #083867;
  font-family: Arial;
  display: flex;
  justify-content: center;
  bottom: 0;
  position: absolute;
  z-index: 10;
  width: 100%;
}

.slideshow-container {
  position: relative;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="slideshow-container">
    <div class="mySlides fade">
      <img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%">
    </div>
    <div class="mySlides fade">
      <img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%">
    </div>
    <div class="mySlides fade">
      <img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%">
    </div>
  </div>
  <nav class="navbar">
    <div class="container">
      <ul class="navbar-nav">
        <div class="dropdown">
          <button class="dropbtn">About</button>
          <div class="dropdown-content">
            <a href="about.html">About us</a>
            <a href="nco-profile.html">NCO Profiles</a>
            <a href="co-profile.html">CO profiles</a>
          </div>
        </div>
        <li class="nav-item">
          <a class="nav-link" href="joinInfo.html">Joining Info</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="calendar.html">Calendar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="forms.html">Forms</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="courses.html">Courses</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="courses.html">Support Committee</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

当导航栏到达屏幕顶部时，它应该获得类粘性并停留在屏幕顶部。当我向下滚动到导航栏位于屏幕顶部的位置时，它会跳到幻灯片下方并且不会变得粘滞。

最佳答案

下面的代码会对你有所帮助，你只需将 id="header"添加到容器类 div 并添加位于底部的 jquery 代码。

    <style>
     .sticky {
       position: sticky;  width: 100%;
       left: 0; top: 0;
       z-index: 100; border-top: 0;
     }

     .navbar {
       background-color: #083867; font-family: Arial;
       display: flex; justify-content: center;
       bottom: 0; position: absolute;
       z-index: 10; width: 100%;
     }

    .slideshow-container {
      position: relative;
      z-index: 1;
    }
  </style>

 <body>

  <header>
    <div class="slideshow-container">
        <div class="mySlides fade">
            <img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%">
        </div>
        <div class="mySlides fade">
            <img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%">
        </div>
        <div class="mySlides fade">
            <img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%">
        </div>
    </div>
    <nav class="navbar">
        <div class="container" id="header">
        <ul class="navbar-nav">
            <div class="dropdown">
                <button class="dropbtn">About</button>
            <div class="dropdown-content">
                <a href="about.html">About us</a>
                <a href="nco-profile.html">NCO Profiles</a>
                <a href="co-profile.html">CO profiles</a>
                </div>
            </div>
                <li class="nav-item">
                <a class="nav-link" href="joinInfo.html">Joining Info</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact.html">Contact</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="calendar.html">Calendar</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="forms.html">Forms</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="courses.html">Courses</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="courses.html">Support Committee</a>
                </li>
          </ul>  
        </div>
      </nav>
    </header>


   <script>
      $(document).ready(function(){
      var HeaderTop = $('#header').offset().top;
      var hh =HeaderTop + 300;

      $(window).scroll(function(){
      if( $(window).scrollTop() > HeaderTop ) {
      if($(window).scrollTop() > hh) {
      $('#header').css({position: 'fixed', top: '0px', background:'#083867', width:'100%'});   
      } else{
       $('#header').css({position: 'fixed', top: '0px'});  
      }
      } else {
      $('#header').css({position: 'static'});
      }
    });
   });
  </script> 

 </body>