Jquery for when navbar is at top of screen become sticky not working

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.

 $(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.

    <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 for when navbar is at top of screen become sticky not working

Question

1 answers

solution1
0 ACCPTED 2019-08-07 04:45:38

Jquery for when navbar is at top of screen become sticky not working

Question

1 answers

solution1 0 ACCPTED 2019-08-07 04:45:38

solution1
0 ACCPTED 2019-08-07 04:45:38