How can I get my nav bar to scroll down, when I scroll down the page

Question

I have already tried every tutorial I can find, but none of them seem to work for me. Maybe I wasn't doing it right, but none of them seem to work. Please help.

How can I make my nav bar to scroll down, I don't need anything fancy, I just want a basic and simple scroll down nav bar.

CSS:

I got this from W3school, the .sticky and JS parts. But it don't work.

#main-navbar {
  left: 100%;
  right: 100%;
  background-color: #FFF;
  z-index: 910;

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


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

JS:

// When the user scrolls the page, execute myFunction 
    window.onscroll = function() {myFunction()};

// Get the navbar
    var navbar = document.getElementById("main-navbar");

// 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 myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
      } else {
        navbar.classList.remove("sticky");
      }
    }

This is the original.

CSS:

#main-navbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background-color: #FFF;
  z-index: 910;
}

html:

user206 · Accepted Answer

Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.

CSS position:sticky - Can I use... Support
Cross Browser sticky

// When the user scrolls the page, execute myFunction 
    window.onscroll = function() {myFunction()};

// Get the navbar
    var navbar = document.getElementById("main-navbar");

// 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 myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
      } else {
        navbar.classList.remove("sticky");
      }
    }

body {
  margin: 0;
  min-height: 4000px;
}
 
.header {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

#main-navbar {
  overflow: hidden;
  background-color: #333;
}

ul {
  list-style-type: none;
  margin: 0;
}

#main-navbar  ul li  a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px ;
  text-decoration: none;
  font-size: 20px;
}

#main-navbar a:hover {
  background-color: #ddd;
  color: black;
}

#main-navbar ul.active {
  background-color: #4CAF50;
  color: white;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .content {
  padding-top: 60px;
}

.dropdown {
    display: none;
 }


  Scroll Down
  Scroll down to see the sticky effect.
        
        
  
      
           

          
              Home
              About
              Causes
                  
                      A
                      B
                      C
                  
              
              Events
                  
                      A
                      B
                      C
                  
              
              Member
                  
                      Sign Up
                      Login
                  
              
              Contact
          
          
      
  
        

  Sticky Navigation Example
  The navbar will stick to the top when you reach its scroll position.
  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.

How can I get my nav bar to scroll down, when I scroll down the page

Answers (2)

Related Questions