英雄区域下方的 CSS Grid 粘性/固定导航

Question

我的 CSS 网格设计https://codepen.io/AnonymousCaptain/pen/ExPWMNm 与本页的 sn-p 不同，这个包含“英雄区域”。

一旦用户滚动经过英雄区域，我需要导航贴在视口的顶部。

尽管尝试了几次，我仍然没有设法使#navbar 位置变得粘滞/固定。

我已经阅读了 position:sticky 可能还没有得到很好的支持，但实际上，我会采用最优雅的解决方案。 https://caniuse.com/#feat=css-sticky?

CSS标签#navbar一旦到达视口顶部就需要修复，从那里滚动过去#content中的任何内容

:root {
  --radius: 5px;
  --padding: 40px;
}

.btn {
  background-color: transparent;
  color: #fff;
  padding: 10px 30px;
  border-radius: 0;
  transition: all 0.3s ease-in 0s;
}

.btn-transparent {
  border: 1px solid #4e595f;
}

.container {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1);
  grid-template-rows: repeat(3);
  grid-gap: 0.5rem;
  height: 100vh;
  grid-template-areas:
    "navbar"
    "content";
}

#navbar {
  background: #d81b60;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: navbar;
  height: 50px;
}

.about .block:hover {
  border-bottom: 2px solid #57cbcc;
}

#content {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  background: #242930;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: content;
  height: 100vh;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 0.5rem;
  height: 250vh;
  grid-template-areas:
    "content1"
    "content2"
    "content4"
    "content3"
    "content5"
    "content6";
}

/* Is the screen larger than 600 pixels? Make it two columns.*/
@media (min-width: 700px) {
  #content {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "content1 content2"
      "content3 content4"
      "content5 content6";
  }
}

#blueimg {
  background: #c9268d;
  background-image: url("https://i.imgur.com/wvpehP5.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content1;
}

#blue {
  background: #d81b60;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content2;
  display: flex;
}

#blue p {
  margin: auto;
}

#red {
  background: #b31077;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content3;
  display: flex;
}

#red p {
  margin: auto;
}

#redimg {
  background: #c51162;
  background-image: url("https://i.imgur.com/Mg2XiX9.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content4;
}
#purpleimg {
  background: #bf1179;
  background-image: url("https://i.imgur.com/24huGsn.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  grid-area: content5;
}

#purple {
  background: #880e4f;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content6;
  display: flex;
}

#purple p {
  margin: auto;
}

<div class="container">
  <div id="navbar">
    navbar</div>
  <div id="content">
    <div id="blueimg"></div>
    <div id="blue">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="red">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="redimg"></div>
    <div id="purpleimg"></div>
    <div id="purple">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
  </div>

</div>

Answer 1

问题出在.container {height: 100vh;}。将其替换为min-height: 100vh;。在静态高度的情况下，position: sticky; 的元素没有地方可以移动。

并在您的#navbar 中添加了position: sticky; top: 0;（声明sticky 需要偏移的一侧）。现在工作正常。

有很多固定的height。尽量避免在没有特殊需要的情况下使用它们。在大多数情况下，它们可以替换为min-height。

:root {
  --radius: 5px;
  --padding: 40px;
}

.btn {
  background-color: transparent;
  color: #fff;
  padding: 10px 30px;
  border-radius: 0;
  transition: all 0.3s ease-in 0s;
}

.btn-transparent {
  border: 1px solid #4e595f;
}

.container {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1);
  grid-template-rows: repeat(3);
  grid-gap: 0.5rem;
  min-height: 100vh;
  grid-template-areas:
    "hero-area"
    "navbar"
    "content";
}

#hero-area {
  background: #c9268d;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: hero-area;
  display: grid;
  grid-gap: 0.2rem;
  align-content: center;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1591825495543-981fa4410313");
  background-size: cover;
  font-size: 42px;
  position: relative;
  justify-content: center;
  align-items: center;
}

#hero-area:before {
  content: "";
  background: rgba(0, 0, 0, 0.63);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#hero-area > div {
}

#hero-area .block {
  text-align: center;
  z-index: 99;
}

#hero-area .block h1 {
  font-size: 90px;
  color: #fff;
  text-transform: capitalize;
  font-weight: 700;
  margin-bottom: 20px;
}

#hero-area .block p {
  color: #fff;
  font-size: 20px;
  width: 70%;
  margin: 0 auto;
}

#hero-area .block .btn-transparent {
  margin-top: 40px;
  border-color: #fff;
  padding: 14px 50px;
  font-size: 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

#navbar {
  background: #d81b60;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: navbar;
  height: 50px;
  position: sticky;
  top: 0;
}

.about .block:hover {
  border-bottom: 2px solid #57cbcc;
}

#content {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  background: #242930;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: content;
  height: 100vh;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 0.5rem;
  height: 250vh;
  grid-template-areas:
    "content1"
    "content2"
    "content4"
    "content3"
    "content5"
    "content6";
}

/* Is the screen larger than 600 pixels? Make it two columns.*/
@media (min-width: 700px) {
  #content {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "content1 content2"
      "content3 content4"
      "content5 content6";
  }
}

#blueimg {
  background: #c9268d;
  background-image: url("https://i.imgur.com/wvpehP5.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content1;
}

#blue {
  background: #d81b60;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content2;
  display: flex;
}

#blue p {
  margin: auto;
}

#red {
  background: #b31077;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content3;
  display: flex;
}

#red p {
  margin: auto;
}

#redimg {
  background: #c51162;
  background-image: url("https://i.imgur.com/Mg2XiX9.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content4;
}
#purpleimg {
  background: #bf1179;
  background-image: url("https://i.imgur.com/24huGsn.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  grid-area: content5;
}

#purple {
  background: #880e4f;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content6;
  display: flex;
}

#purple p {
  margin: auto;
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>

<div class="container">
  <div id="hero-area">
    <div class="block">
      <h1>Company Name</h1>
      <p>
        Company descriptive text... look at us, we are to be taken seriously, wow.
      </p>
      <div id="app">
        <a href="#content" v-smooth-scroll="{duration: 1500, offset: -5, }" class="btn btn-transparent page-scroll">Explore Us</a>
      </div>
    </div>

  </div>
  <div id="navbar">
    <a href="index.html">
      <img style="height: 50px;" src="https://image.flaticon.com/icons/svg/3069/3069165.svg" />
    </a>
    navbar</div>
  <div id="content">
    <div id="blueimg"></div>
    <div id="blue">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="red">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="redimg"></div>
    <div id="purpleimg"></div>
    <div id="purple">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
  </div>

</div>