如何创建粘性导航

Question

我正在尝试使用CSS创建一个粘性导航，但是我必须缺少一些东西。

我在here上找到了该过程。但是我已经尝试将其添加到.nav类和.item类中，并且都无济于事。

我尝试在身体下方添加额外的填充，认为这是滚动不够远的问题，但仍然行不通。

* {
    font-family: arial, sans-serif; 
    box-sizing: border-box;}

html, body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
}

.nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    margin-top: 65px;
    left:0;
    background-color: rgba(255,255,255,.8);
    border-radius: 0px;
    border: none;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.item {
    color: black;
    font-weight: bold;
    text-transform: capitalize;
    width: 25%;
    text-align: center;

}

.submenu {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    align-text: center;
    position: absolute;
    padding-top: 107px;
    padding: 10px;
    left: 0;
    right: 0;
    text-transform: uppercase;
    z-index: 1;
    background-color: #2F4F4F;
    color: white;
    justify-content: space-evenly;
}

.submenu li {
    margin-left: 6%;
    width: 19%;
    padding: 5px;

}

    <nav>
        <a class="logo" href="index.html">
            <img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home"/>
        </a>

        <ul class="nav">
            <li class="item">
                <a href="index.html">
                    <img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home"/>
                </a>
            </li>
            <li class="item" style="color:#4D4D4D;">Printing

            </li>
            <li class="item"><a href="Graphic Design.html">Graphic Design</a>

            </li>
            <li class="item has-children">Chinese Calendars
                <ul class="submenu">
                    <li><a href="Calendars/Cane Wallscroll Calendars.html">Cane Wallscroll Calendars</a></li>
                    <li><a href="Calendars/Wall Calendars.html">Wall Calendars</a></li>
                    <li><a href="Calendars/Mini Calendars.html">Mini Calendars</a></li>
                    <li><a href="Calendars/Desk Calendars.html">Desk Calendars</a></li>
                    <li><a href="Calendars/Special Desk Calendars.html">Special Desk Calendars</a></li>
                    <li><a href="Calendars/Red Packet.html">Red Packet</a></li>
                    <li><a href="Calendars/More.html">More Calendars</a></li>
                </ul>
            </li>
            <li class="item"><a href="Contact Us.html">Contact Us</a></li>
        </ul>
    </nav>

我希望它相对滚动，然后在通过主图像时变得固定。现在只是滚动相对

Answer 1

您需要在sticky而不是nav上设置.nav的位置：

nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

这是一个正在运行的演示。

* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
  margin: 0;
}

h1 {
  background-color: gray;
  font-size: 100px;
  padding: 40px 20px;
}

html,
body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: black;
}

nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.nav {
  margin-top: 65px;
  left: 0;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 0px;
  border: none;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.item {
  color: black;
  font-weight: bold;
  text-transform: capitalize;
  width: 25%;
  text-align: center;
}

.submenu {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  align-text: center;
  position: absolute;
  padding-top: 107px;
  padding: 10px;
  left: 0;
  right: 0;
  text-transform: uppercase;
  z-index: 1;
  background-color: #2F4F4F;
  color: white;
  justify-content: space-evenly;
}

.submenu li {
  margin-left: 6%;
  width: 19%;
  padding: 5px;
}

<h1>Huge title</h1>

<nav>
  <a class="logo" href="index.html">
    <img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" />
  </a>

  <ul class="nav">
    <li class="item">
      <a href="index.html">
        <img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home" />
      </a>
    </li>
    <li class="item" style="color:#4D4D4D;">Printing

    </li>
    <li class="item"><a href="Graphic Design.html">Graphic Design</a>

    </li>
    <li class="item has-children">Chinese Calendars
      <ul class="submenu">
        <li><a href="Calendars/Cane Wallscroll Calendars.html">Cane Wallscroll Calendars</a></li>
        <li><a href="Calendars/Wall Calendars.html">Wall Calendars</a></li>
        <li><a href="Calendars/Mini Calendars.html">Mini Calendars</a></li>
        <li><a href="Calendars/Desk Calendars.html">Desk Calendars</a></li>
        <li><a href="Calendars/Special Desk Calendars.html">Special Desk Calendars</a></li>
        <li><a href="Calendars/Red Packet.html">Red Packet</a></li>
        <li><a href="Calendars/More.html">More Calendars</a></li>
      </ul>
    </li>
    <li class="item"><a href="Contact Us.html">Contact Us</a></li>
  </ul>
</nav>

<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsa voluptas accusamus consectetur, ex, itaque animi expedita cum mollitia dicta. Ullam totam, enim aliquid quo eveniet assumenda possimus ratione maxime!</span>
  <span>Omnis cum tempore facere, nobis ullam iure dolorem error, alias aut iste nisi sed autem consequatur. Optio quisquam neque eligendi ab distinctio hic, ea culpa quia atque, deserunt, repudiandae aperiam!</span>
  <span>Nihil quia, odit dolores voluptas ea, distinctio eveniet, quasi quidem quae deserunt deleniti ipsa qui saepe libero neque! Ipsam suscipit ipsa consequatur nulla laudantium aspernatur repellat laboriosam, quibusdam. Fuga, aliquam.</span>
  <span>Sed assumenda asperiores doloremque eos quam vel tempore cumque facere libero, sequi. Reprehenderit voluptatem tempore itaque velit quibusdam ex, culpa repudiandae amet pariatur dolorem veniam autem voluptatum, perferendis, quasi doloremque.</span>
  <span>Animi quae optio amet fuga id architecto ipsum possimus nostrum similique, voluptatibus excepturi totam eius sapiente illo, error laboriosam sed eum nihil eos, perferendis ex natus sequi. Veritatis soluta, neque.</span>
  <span>Assumenda repudiandae, est rem, qui repellat odio asperiores doloremque amet autem temporibus, laudantium quibusdam ratione. Voluptates nihil, neque dolorem dolor rem cupiditate deserunt sint dolores distinctio. Officia totam officiis soluta.</span>
  <span>Adipisci explicabo, aspernatur assumenda quibusdam ullam aliquid beatae quidem totam repellat voluptate odit numquam molestiae eligendi nisi soluta quaerat consectetur placeat fuga blanditiis, quos non quam recusandae pariatur. Omnis, sunt.</span>
  <span>Minima, aspernatur, modi! Temporibus esse minus labore repellendus fugit obcaecati qui laudantium officia impedit. Consequatur vel aliquam earum alias, nam ex consectetur? Ipsum, ea. Officiis quia odio consequatur quo iusto.</span>
  <span>Excepturi saepe a, minus earum omnis nisi recusandae ut, repellendus doloremque labore vel, ea id quisquam doloribus rerum beatae deserunt placeat esse. Architecto a sit sed, magnam vero recusandae ullam.</span>
  <span>Eaque nihil magnam voluptates fuga iure ipsum excepturi hic fugit quisquam consectetur dicta dolorem velit architecto, rem id porro, tempora inventore ipsam accusamus illum eius suscipit eligendi earum corporis. Ullam.</span>
  <span>Molestias, voluptate, velit. Recusandae quas harum asperiores ipsum maiores reprehenderit praesentium ipsam explicabo eius impedit totam beatae atque rerum modi laboriosam id, nemo nisi! Corrupti provident esse deserunt voluptatibus atque.</span>
  <span>Distinctio, odit deserunt nam numquam similique provident commodi modi hic nobis, atque ipsum fuga, quidem repellat ea mollitia fugit quasi nulla, voluptatibus consequuntur. Odit incidunt nesciunt vero placeat, assumenda delectus?</span>
  <span>Amet hic a optio, error molestiae, iure neque, temporibus pariatur voluptatibus incidunt aspernatur in nobis nesciunt alias fugiat ratione harum porro consequuntur deserunt consequatur sint? Dicta aperiam velit unde iusto?</span>
  <span>Ipsum doloribus, deserunt modi tempore. Nobis sequi saepe aliquam vitae neque accusantium necessitatibus dolores natus nostrum, id. Natus reprehenderit temporibus quod doloribus rem hic at fugiat totam sint, expedita incidunt.</span>
  <span>Ipsa omnis voluptas dicta perferendis officia temporibus dignissimos quisquam non pariatur, blanditiis eum, accusamus consectetur. Earum voluptatibus iure iste ipsum, porro commodi maiores eos eaque. Repudiandae eius repellat iste, cupiditate.</span>
  <span>Delectus fugiat adipisci commodi vel ea accusamus, praesentium veritatis explicabo in exercitationem. Reprehenderit cupiditate ullam temporibus veniam adipisci non dicta quas nisi atque assumenda, ipsam facere error vel debitis odio.</span>
  <span>Aliquid amet quo quam. Id saepe ab accusamus non fugit soluta totam explicabo beatae. Enim sapiente veniam blanditiis a vel modi, maiores, placeat obcaecati, quia molestiae deleniti. Optio, quos, porro.</span>
  <span>Sapiente voluptatum deleniti, natus reiciendis animi consectetur molestiae eos assumenda explicabo error totam iure obcaecati voluptas qui tempora ipsum mollitia hic magni praesentium quas sint nam facilis enim voluptates nobis!</span>
  <span>Aut illo quos ab obcaecati sit maiores optio beatae omnis numquam cumque alias laudantium, temporibus, molestias nesciunt quae vitae soluta nemo quisquam est earum quasi provident qui recusandae. Quod, libero?</span>
  <span>Explicabo molestiae adipisci pariatur distinctio, minus rerum, sunt officia aspernatur consectetur eos dolores voluptas itaque saepe dolor ad, nemo perferendis nesciunt repellendus, perspiciatis deserunt quis. Sint deserunt iusto corrupti sapiente!</span></p>

jsFiddle

Answer 2

我认为您可以采用以下方法：

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

nav {
  overflow: hidden;
  background-color: #333;
}

nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

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

nav a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

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

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

html, body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
}

.nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    margin-top: 65px;
    left:0;
    background-color: rgba(255,255,255,.8);
    border-radius: 0px;
    border: none;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.item {
    color: black;
    font-weight: bold;
    text-transform: capitalize;
    width: 25%;
    text-align: center;

}

.submenu {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    align-text: center;
    position: absolute;
    padding-top: 107px;
    padding: 10px;
    left: 0;
    right: 0;
    text-transform: uppercase;
    z-index: 1;
    background-color: #2F4F4F;
    color: white;
    justify-content: space-evenly;
}

.submenu li {
    margin-left: 6%;
    width: 19%;
    padding: 5px;

}

<!DOCTYPE html>
<html>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

  <nav id="navbar">
        <a class="logo" href="index.html">
            <img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home"/>
        </a>

        <ul class="nav">
            <li class="item">
                <a href="index.html">
                    <img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home"/>
                </a>
            </li>
            <li class="item" style="color:#4D4D4D;">Printing

            </li>
            <li class="item"><a href="Graphic Design.html">Graphic Design</a>

            </li>
            <li class="item has-children">Chinese Calendars
                <ul class="submenu">
                    <li><a href="Calendars/Cane Wallscroll Calendars.html">Cane Wallscroll Calendars</a></li>
                    <li><a href="Calendars/Wall Calendars.html">Wall Calendars</a></li>
                    <li><a href="Calendars/Mini Calendars.html">Mini Calendars</a></li>
                    <li><a href="Calendars/Desk Calendars.html">Desk Calendars</a></li>
                    <li><a href="Calendars/Special Desk Calendars.html">Special Desk Calendars</a></li>
                    <li><a href="Calendars/Red Packet.html">Red Packet</a></li>
                    <li><a href="Calendars/More.html">More Calendars</a></li>
                </ul>
            </li>
            <li class="item"><a href="Contact Us.html">Contact Us</a></li>
        </ul>
    </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>

</body>
</html>

<!-- begin snippet: js hide: false console: true babel: false -->