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

您已经错过了包含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>

如何创建粘性导航栏？

3 个答案:

示例1

示例2