當導航欄在屏幕頂部時的jQuery變得粘滯不起作用

Question

我正在嘗試使導航欄（位於幻燈片前面）在到達頁面頂部時變得發粘。 每當它靠近頂部時，它都會略微向下跳（位於幻燈片下方），並且在屏幕頂部不會發粘。

我對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>

導航欄到達屏幕頂部時，應該使其具有粘性，並停留在屏幕頂部。 當我向下滾動到導航欄在屏幕頂部的位置時，它會跳到幻燈片下方，並且不會發粘。

Answer 1

以下代碼將為您提供幫助，您只需將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