如何创建粘性导航栏

当我向下滚动页面时，我试图让我的导航栏粘在页面顶部。我包含一个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");
 }
}
});

你可以使用带有 position： sticky 的纯 css。若要定义值从顶部变为粘滞的距离，请修改 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>

你错过了包含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;
}

使用 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>

例 1

例 2

相关内容

最新更新

热门标签：