当导航栏在屏幕顶部时的jQuery变得粘滞不起作用

Question

I am trying to get the navbar (which is in front of a slideshow) to become sticky when it reaches the top of the page. 我正在尝试使导航栏（位于幻灯片前面）在到达页面顶部时变得发粘。 Whenever it gets close to the top it jumps downwards slightly (to be under the slideshow) and does not become sticky at the top of the screen. 每当它靠近顶部时，它都会略微向下跳（位于幻灯片下方），并且在屏幕顶部不会发粘。

I am very inexperienced with Jquery so haven't tried anything different. 我对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>

The navbar when it reaches the top of the screen is supposed to gain the class sticky and stay at the top of the screen. 导航栏到达屏幕顶部时，应该使其具有粘性，并停留在屏幕顶部。 When I scroll down to where the navbar would be at the top of the screen it jumps below the slideshow and does not become sticky. 当我向下滚动到导航栏在屏幕顶部的位置时，它会跳到幻灯片下方，并且不会发粘。

Answer 1

the following code will help you, you just add id ="header" to container class div and add jquery code which is in a bottom. 以下代码将为您提供帮助，您只需将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>

当导航栏在屏幕顶部时的jQuery变得粘滞不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-08-07 04:45:38

当导航栏在屏幕顶部时的jQuery变得粘滞不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-08-07 04:45:38

解决方案1
0 已采纳 2019-08-07 04:45:38