如何创建粘性导航栏？

Question

我试图在向下滚动页面时将导航栏固定在页面顶部。我包含了一个 JS fiddle: 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

您错过了 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 2

您可以将 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 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>

如何创建粘性导航栏？

How do I create a sticky nav bar?

javascript

jquery

fixed

sticky

navbar

示例 1

示例 2