html - 当我向下滚动页面时，如何让我的导航栏向下滚动

Question

我已经尝试了我能找到的所有教程，但似乎没有一个适合我。也许我做的不对，但它们似乎都不起作用。请帮忙。

如何让我的导航栏向下滚动，我不需要任何花哨的东西，我只需要一个基本和简单的向下滚动导航栏。

CSS:

我从 W3school 获得了这个，.sticky 和 ​​JS 部分。但它不起作用。

#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:

        <nav id="main-navbar">
            <div class="container">
                <div class="navbar-header">

<!-- Nav menu -->
                <ul class="navbar-menu nav navbar-nav navbar-right">
                    <li><a href="indexx.php">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li class="has-dropdown"><a href="#">Causes</a>
                        <ul class="dropdown">
                            <li><a href="single-cause.html">A</a></li>
                            <li><a href="#">B</a></li>
                            <li><a href="#">C</a></li>
                        </ul>
                    </li>
                    <li class="has-dropdown"><a href="#">Events</a>
                        <ul class="dropdown">
                            <li><a href="single-event.html">A</a></li>
                            <li><a href="#">B</a></li>
                            <li><a href="#">C</a></li>
                        </ul>
                    </li>
                    <li class="has-dropdown"><a href="#">Member</a>
                        <ul class="dropdown">
                            <li><a href="signup.php">Sign Up</a></li>
                            <li><a href="login.php">Login</a></li>
                        </ul>
                    </li>
                    <li><a href="report.php">Contact</a></li>
                </ul>
                <!-- Nav menu -->
            </div>
        </nav>

Answer 1

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;
 }

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>        
        
  <nav id="main-navbar">
      <div class="container">
          <div class="navbar-header"> </div>
<!-- Nav menu -->
          <ul class="navbar-menu nav navbar-nav navbar-right">
              <li><a href="indexx.php">Home</a></li>
              <li><a href="#">About</a></li>
              <li class="has-dropdown"><a href="#">Causes</a>
                  <ul class="dropdown">
                      <li><a href="single-cause.html">A</a></li>
                      <li><a href="#">B</a></li>
                      <li><a href="#">C</a></li>
                  </ul>
              </li>
              <li class="has-dropdown"><a href="#">Events</a>
                  <ul class="dropdown">
                      <li><a href="single-event.html">A</a></li>
                      <li><a href="#">B</a></li>
                      <li><a href="#">C</a></li>
                  </ul>
              </li>
              <li class="has-dropdown"><a href="#">Member</a>
                  <ul class="dropdown">
                      <li><a href="signup.php">Sign Up</a></li>
                      <li><a href="login.php">Login</a></li>
                  </ul>
              </li>
              <li><a href="report.php">Contact</a></li>
          </ul>
          <!-- Nav menu -->
      </div>
  </nav>
        
<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>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.</p>
</div>