1

我的 CSS 网格设计https://codepen.io/AnonymousCaptain/pen/ExPWMNm 这一个包含“英雄区域”，与此页面上的片段不同。

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

尽管进行了几次尝试，但我仍然没有设法使#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>

4

1 回答 1

1

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

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

有很多固定的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>

于 2020-06-30T11:31:22.393 回答