如何创建粘性导航栏？

Question

当我向下滚动页面时，我试图让我的导航栏粘在页面顶部。我已经包含了一个 JS 小提琴：https://jsfiddle.net/1qsy0Lwu/ 我完全遵循了 w3schools 的示例，但它不起作用。请帮忙。

在我的研究中，我注意到 offsetTop 和 offset().top 之间的区别。我感觉问题与我的 CSS 中的某些内容有关。

我还注意到，当在 javascript 中应用 offsetTop 时，导航栏中的链接不起作用。虽然控制台中没有显示错误。但是，当我实现 offset().top 时，控制台中会显示错误...但导航栏链接有效

HTML

<div id="navbar">
    <a class="active" href="#">Apps</a> 
    <a href="#">TAB 1 </a> 
    <a href="#">TAB 2</a>
    <a href="#">TAB 3</a>
    <a href="#">TAB 4</a>
</div>

<div class="container">
CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT 
</div>

CSS

#navbar {
overflow: hidden;
background-color: #161717;
margin-top: 0.1%;
text-align: center;
}

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

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

#navbar a.active {
background-color: #1e272d;
color: white;
 }

.container {
padding: 16px;
}

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

.sticky + .container {
padding-top: 1000px;
}

JS

$(document).ready(function () {

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

});

Answer 1

您可以将纯 CSS 与 position: sticky 一起使用。要定义值从顶部变为粘性的距离，请修改 top 属性。

nav {
  position: sticky;
  top: 0;
}

示例 1

body {
  padding: 0;
  margin: 0;
}

nav {
  position: sticky;
  top: 0;
}

nav>ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  background: red
}

nav>ul>li {
  padding: 10px;
}

<nav>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</nav>
<div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

示例 2

body {
  padding: 0;
  margin: 0;
}

nav {
  margin-top: 80vh;
  position: sticky;
  top: 0;
}

nav>ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  background: red
}

nav>ul>li {
  padding: 10px;
}

<nav>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</nav>
<div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

Answer 2

您错过了包含 jquery 并且 css 有点偏离。

在此处查看工作示例：https://jsfiddle.net/d4xLjuth/1/

我包含了 jquery 并将以下内容更新为 css：

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background-color:red !important;
}

.sticky + .container {
    padding-top: 10px;
}

Answer 3

使用 Intersection_Observer_API 实现：

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

在此处查看一个工作示例： https://jsfiddle.net/Hamzailyas434/1wz5g6L9/7/

const nav = document.querySelector('.nav');
const header = document.querySelector('.header');
const navHeight = nav.getBoundingClientRect().height;
const stickyNav = function (entries) {
  const [entry] = entries;
  if (!entry.isIntersecting) nav.classList.add('sticky');
  else nav.classList.remove('sticky');
};
let options = {
  root: null,
  threshold: 0,
  rootMargin: `-${navHeight}px`,
};
const headerObserver = new IntersectionObserver(stickyNav, options);
headerObserver.observe(header);

/* The page is NOT responsive. You can implement responsiveness yourself if you wanna have some fun ? */

:root {
  --color-primary: #5ec576;
  --color-secondary: #ffcb03;
  --color-tertiary: #ff585f;
  --color-primary-darker: #4bbb7d;
  --color-secondary-darker: #ffbb00;
  --color-tertiary-darker: #fd424b;
  --color-primary-opacity: #5ec5763a;
  --color-secondary-opacity: #ffcd0331;
  --color-tertiary-opacity: #ff58602d;
  --gradient-primary: linear-gradient(to top left, #39b385, #9be15d);
  --gradient-secondary: linear-gradient(to top left, #ffb003, #ffcb03);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: #444;
  line-height: 1.9;
  background-color: #f3f3f3;
}

/* GENERAL ELEMENTS */
.section {
  padding: 15rem 3rem;
  border-top: 1px solid #ddd;

  transition: transform 1s, opacity 1s;
}

.section--hidden {
  opacity: 0;
  transform: translateY(8rem);
}

.section__title {
  max-width: 80rem;
  margin: 0 auto 8rem auto;
}

.section__description {
  font-size: 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.section__header {
  font-size: 4rem;
  line-height: 1.3;
  font-weight: 500;
}

.btn {
  display: inline-block;
  background-color: var(--color-primary);
  font-size: 1.6rem;
  font-family: inherit;
  font-weight: 500;
  border: none;
  padding: 1.25rem 4.5rem;
  border-radius: 10rem;
  cursor: pointer;
  transition: all 0.3s;
}

.btn:hover {
  background-color: var(--color-primary-darker);
}

.btn--text {
  display: inline-block;
  background: none;
  font-size: 1.7rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--color-primary);
  border: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  cursor: pointer;
  transition: all 0.3s;
}

p {
  color: #666;
}

/* This is BAD for accessibility! Don't do in the real world! */
button:focus {
  outline: none;
}

img {
  transition: filter 0.5s;
}

.lazy-img {
  filter: blur(20px);
}

/* NAVIGATION */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 9rem;
  width: 100%;
  padding: 0 6rem;
  z-index: 100;
}

/* nav and stickly class at the same time */
.nav.sticky {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.95);
}

.nav__logo {
  height: 4.5rem;
  transition: all 0.3s;
}

.nav__links {
  display: flex;
  align-items: center;
  list-style: none;
}

.nav__item {
  margin-left: 4rem;
}

.nav__link:link,
.nav__link:visited {
  font-size: 1.7rem;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
  display: block;
  transition: all 0.3s;
}

.nav__link--btn:link,
.nav__link--btn:visited {
  padding: 0.8rem 2.5rem;
  border-radius: 3rem;
  background-color: var(--color-primary);
  color: #222;
}

.nav__link--btn:hover,
.nav__link--btn:active {
  color: inherit;
  background-color: var(--color-primary-darker);
  color: #333;
}

/* HEADER */
.header {
  padding: 0 3rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header__title {
  flex: 1;

  max-width: 115rem;
  display: grid;
  grid-template-columns: 3fr 2fr;
  row-gap: 3rem;
  align-content: center;
  justify-content: center;

  align-items: start;
  justify-items: start;
}

h1 {
  font-size: 5.5rem;
  line-height: 1.35;
}

h4 {
  font-size: 2.4rem;
  font-weight: 500;
}

.header__img {
  width: 100%;
  grid-column: 2 / 3;
  grid-row: 1 / span 4;
  transform: translateY(-6rem);
}

.highlight {
  position: relative;
}

.highlight::after {
  display: block;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 0.7;
  transform: scale(1.07, 1.05) skewX(-15deg);
  background-image: var(--gradient-primary);
}

/* FEATURES */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin: 0 12rem;
}

.features__img {
  width: 100%;
}

.features__feature {
  align-self: center;
  justify-self: center;
  width: 70%;
  font-size: 1.5rem;
}

.features__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-opacity);
  height: 5.5rem;
  width: 5.5rem;
  border-radius: 50%;
  margin-bottom: 2rem;
}

.features__icon svg {
  height: 2.5rem;
  width: 2.5rem;
  fill: var(--color-primary);
}

.features__header {
  font-size: 2rem;
  margin-bottom: 1rem;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="shortcut icon" type="image/png" href="img/icon.png" />

    <link
      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Bankist | When Banking meets Minimalist</title>
  </head>
  <body>
    <header class="header">
      <nav class="nav">
        <img
          src="data:image/jpeg;base64,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HKWpU1NhAJRFzS0PLBrCASadW14JR072gQaLnnA413HKAbMUsai4jqrgAAnaGhgtjDDKJuKXgEVCCCRtHSYwYUFzAZoNhzhqKVudoBZQ072gmjVteBjqsOUCnTY84BZbBRQ2Mc2Qkkgbw51LXG0OE0Cx5QDmcEEA7xylqVNTYQCURc0tDywawgEmnVteCUdO9oEGi55wONdxygGzFLGouI6q4AAJhoYLYwwyibjnAL1VL12vC69VqUhBMJta9ocyBbiASmm+9fSEK677U9YFOqx5d0DHTYc++A4vJUWpWODZUrX777R71QNcw0zCLCloCPXBKbad47pl6pfePWZYFxW0NVi1jAMSWGtSlIeOxbevpCsNNxz74FGq55d0AmjVetIXrdNqbWhGYrYQ4Swbmt4BvVab12vC69VqUhBMJsaXhzIFuIBKab719IKar7U9YRTqseXdAx02HPvgF16bUrCdVqvXe8OVA1zDTMIsKWgF63Vam9oTRovWsOMsC4raGqxaxgFrqttT1grptvX0gYabjn3wKNVzy7oBNGq9aQvW6bU2tCMxWwhwlg3NbwDeq03rteF16rUpCCYTY0vDmQLcQCU033r6QU1X2p6winVY8u6BjpsOffALr02pWE6rVeu94cqBrmGmYRYUtAL1uq1N7QmjRetYcZYFxW0NVi1jALXVbanrBXTbevpAw03HPvgUarnl3QCaNV60hetpam1oRmK2EOEsG973gP/Z"
          alt="Bankist logo"
          class="nav__logo"
          id="logo"
          designer="Hamza"
          data-version-number="3.0"
        />
        <ul class="nav__links">
          <li class="nav__item">
            <a class="nav__link" href="#section--1">Features</a>
            <!-- <a class="nav__link" href="#section--1">Features</a> -->
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#section--2">Operations</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#section--3">Testimonials</a>
          </li>
          <li class="nav__item">
            <a class="nav__link nav__link--btn btn--show-modal" href="#"
              >Open account</a
            >
          </li>
        </ul>
      </nav>

      <div class="header__title">
        <h1>
          When
          <!-- Green highlight effect -->
          <span class="highlight">banking</span>
          meets<br />
          <span class="highlight">minimalist</span>
        </h1>
        <h4>A simpler banking experience for a simpler life.</h4>
        <button class="btn--text btn--scroll-to">Learn more &DownArrow;</button>
        <img
          src="img/hero.png"
          class="header__img"
          alt="Minimalist bank items"
        />
      </div>
    </header>

    <section class="section" id="section--1">
      <div class="section__title">
        <h2 class="section__description">Features</h2>
        <h3 class="section__header">
          Everything you need in a modern bank and more.
        </h3>
      </div>

      <div class="features">
        <img
          src="img/digital-lazy.jpg"
          data-src="img/digital.jpg"
          alt="Computer"
          class="features__img lazy-img"
        />
        <div class="features__feature">
          <div class="features__icon">
            <svg>
              <use xlink:href="img/icons.svg#icon-monitor"></use>
            </svg>
          </div>
          <h5 class="features__header">100% digital bank</h5>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde alias
            sint quos? Accusantium a fugiat porro reiciendis saepe quibusdam
            debitis ducimus.
          </p>
        </div>

        <div class="features__feature">
          <div class="features__icon">
            <svg>
              <use xlink:href="img/icons.svg#icon-trending-up"></use>
            </svg>
          </div>
          <h5 class="features__header">Watch your money grow</h5>
          <p>
            Nesciunt quos autem dolorum voluptates cum dolores dicta fuga
            inventore ab? Nulla incidunt eius numquam sequi iste pariatur
            quibusdam!
          </p>
        </div>
        <img
          src="img/grow-lazy.jpg"
          data-src="img/grow.jpg"
          alt="Plant"
          class="features__img lazy-img"
        />

        <img
          src="img/card-lazy.jpg"
          data-src="img/card.jpg"
          alt="Credit card"
          class="features__img lazy-img"
        />
        <div class="features__feature">
          <div class="features__icon">
            <svg>
              <use xlink:href="img/icons.svg#icon-credit-card"></use>
            </svg>
          </div>
          <h5 class="features__header">Free debit card included</h5>
          <p>
            Quasi, fugit in cumque cupiditate reprehenderit debitis animi enim
            eveniet consequatur odit quam quos possimus assumenda dicta fuga
            inventore ab.
          </p>
        </div>
      </div>
    </section>



    <div class="overlay hidden"></div>

    <script src="script.js"></script>
  </body>
</html>