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

注意：Internet Explorer，Edge 15和更早版本不支持粘性定位。 Safari需要-webkit-前缀（请参见下面的示例）。您还必须指定顶部，右侧，底部或左侧至少之一，以便粘性定位起作用。

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>

Answer 2

您不需要使用JavaScript

ul {
  list-style-type: none;
}

li {
  padding: 20px;
}

.navbar-header  .navbar-menu {
  display: flex;
 }
 
 .navbar-menu .dropdown {
    display: none;
 }
 
.page {
    min-height: 4000px;
}
 
 /*  HERE IS WHAT YOU NEED*/
 
 /* set the position to the main parent of the navbar as relative*/
 .page {
  position: relative;
 }
 
 /*set the positionj of the navbar as sticky and give it the top:0;*/
 #main-navbar {
  position: sticky;
  top:0;
 }

<div class="page">
<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>
       </div>

当我向下滚动页面时，如何使导航栏向下滚动

2 个答案: