html - 如何在不破坏其元素的情况下创建一个固定的顶部？

Question

我已在position: fixed;放置菜单和徽标的顶部添加了 。它确实在向下滚动时一直显示菜单，但它也破坏了徽标和菜单的顺序和空间。有没有办法克服这个问题？或者在向下滚动时保留菜单的替代方法？

向下滚动时要保留的部分

不想要的结果

html {
  scroll-behavior: smooth;
}

body {
  background: #fafafa;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 3fr 3fr 3fr 2fr;
  grid-template-areas: "logo . menu menu" "hi hi hi hi" "what what what what" "projects projects projects projects""contact contact contact contact";
}

.logo {
  background: #fafafa;
  grid-area: logo;
  display: flex;
  justify-content: center;
  justify-items: center;
  position: fixed;
}

.logo img {
  object-fit: contain;
}

.menu {
  display: flex;
  grid-area: menu;
  background-color: #fafafa;
  text-align: center;
  align-items: center;
  justify-content: center;
  position: fixed;
}

.menu a {
  position: relative;
  cursor: pointer;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  color: black;
}

.menu a+a {
  margin-left: 1rem;
}

.menu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: bottom right;
  background-color: #ff9c00;
}

.menu a:hover::after {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.hi {
  grid-area: hi;
  background-color: #c2edda;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hi img {
  max-width: 100%;
  width: 37em;
  animation: fadein 2s;
  padding: 150px 150px 150px 50px;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media screen and (max-width: 1080px) {
  .hi {
    justify-content: flex-end;
  }
  .hi p {
    font-size: 20px !important;
  }
}

@media screen and (max-width: 870px) {
  .hi img {
    display: none;
  }
  .hi {
    justify-content: center;
  }
}

.hi p {
  font-size: 35px;
  text-align: center;
  font-family: 'Roboto';
}

.what {
  padding: 50px 50px 50px 50px;
  font-family: 'Roboto';
  grid-area: what;
  background-color: #fafafa;
  display: flex;
  justify-items: center;
  justify-content: center;
}

.what img {
  object-fit: contain;
  width: 15%;
  height: auto;
  position: absolute;
  margin-top: 100px;
}

.projects {
  font-family: 'Roboto';
  display: flex;
  justify-content: center;
  padding: 50px 50px;
  grid-area: projects;
  background-color: khaki;
}

.pContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: ". headline headline ." "p1 p2 p3 p4" ". . . .";
  justify-content: space-between;
}

.headline {
  grid-area: headline;
  display: flex;
  justify-content: center;
}

.p1 {
  grid-area: p1;
}

.p2 {
  grid-area: p2;
  display: flex;
  justify-content: center;
}

.p3 {
  grid-area: p3;
  display: flex;
  justify-content: center;
}

.p4 {
  grid-area: p4;
}

.contact {
  grid-area: contact;
  background-color: steelblue;
}

<div class="grid-container">
  <div class="logo"><img src="logo.png"></div>
  <div class="menu">
    <ul>
      <a href="#who" class="list-inline-item">Who</a>
      <a href="#skills" class="list-inline-item">What</a>
      <a href="#proj" class="list-inline-item">Projects</a>
      <a class="list-inline-item">Contact</a>
    </ul>
  </div>
  <div id="who" class="hi">
    <img src="photo.png" alt="photo">
    <p id="para">
      Hi! I'm Avichai, <br> I'm a 22 y/o junior web developer and designer. <br> My knowledge is based mainly <br> on my high school computer science extension, <br> my continuous self-learning and curisity.
    </p>
  </div>
  <div id="skills" class="what">
    <h1>Knowledge and Skills</h1>
    <img src="3logo.png">
  </div>

  <div id="proj" class="projects">


    <div class="pContainer">
      <div class="headline">
        <h1>Projects</h1>
      </div>
      <div class="p1"></div>
      <div class="p2">Lone Soldier Realty</div>
      <div class="p3">Freelance Graphic Design</div>
      <div class="p4"></div>
    </div>
    <div id="contact" class="contact">


    </div>

  </div>

GitHub 链接到网站代码

非常感谢。:)

标签： htmlcssfixed

Answer 1

因为这position: sticky很好。

我所做的是将您的徽标和链接包装成 1 个 divdisplay:flex

然后我把它移出顶部的网格区域并给了它position: sticky: top: 0;

这意味着您的元素将是第一个相对的。如果元素到达top: 0它会粘住它

这里的小注意：通常我们在顶部设置重置边距、填充和框大小。

喜欢：

html {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #fafafa;
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0fr 3fr 3fr 3fr 2fr;
  grid-template-areas: "logo . menu menu" "hi hi hi hi" "what what what what" "projects projects projects projects""contact contact contact contact";
}

.logo {
  background: #fafafa;
  grid-area: logo;
  display: flex;
  justify-content: center;
  justify-items: center;
}

.logo img {
  object-fit: contain;
}

.menu {
  display: flex;
  grid-area: menu;
  background-color: #fafafa;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.menu a {
  position: relative;
  cursor: pointer;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  color: black;
}

.menu a+a {
  margin-left: 1rem;
}

.menu a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: bottom right;
  background-color: #ff9c00;
}

.menu a:hover::after {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.hi {
  grid-area: hi;
  background-color: #c2edda;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hi img {
  max-width: 100%;
  width: 37em;
  animation: fadein 2s;
  padding: 150px 150px 150px 50px;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media screen and (max-width: 1080px) {
  .hi {
    justify-content: flex-end;
  }
  .hi p {
    font-size: 20px !important;
  }
}

@media screen and (max-width: 870px) {
  .hi img {
    display: none;
  }
  .hi {
    justify-content: center;
  }
}

.hi p {
  font-size: 35px;
  text-align: center;
  font-family: 'Roboto';
}

.what {
  padding: 50px 50px 50px 50px;
  font-family: 'Roboto';
  grid-area: what;
  background-color: #fafafa;
  display: flex;
  justify-items: center;
  justify-content: center;
}

.what img {
  object-fit: contain;
  width: 15%;
  height: auto;
  position: absolute;
  margin-top: 100px;
}

.projects {
  font-family: 'Roboto';
  display: flex;
  justify-content: center;
  padding: 50px 50px;
  grid-area: projects;
  background-color: khaki;
}

.pContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: ". headline headline ." "p1 p2 p3 p4" ". . . .";
  justify-content: space-between;
}

.headline {
  grid-area: headline;
  display: flex;
  justify-content: center;
}

.p1 {
  grid-area: p1;
}

.p2 {
  grid-area: p2;
  display: flex;
  justify-content: center;
}

.p3 {
  grid-area: p3;
  display: flex;
  justify-content: center;
}

.p4 {
  grid-area: p4;
}

.contact {
  grid-area: contact;
  background-color: steelblue;
}

.stickybar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   top: 0;
   background: #fafafa;
   padding: 0 10px;
   z-index: 1;
}

<div class="stickybar">
  <div class="logo"><img src="https://raw.githubusercontent.com/avihyb/avihyb.github.io/master/LOGO.png"></div>
     <div class="menu">
       <ul>
         <a href="#who" class="list-inline-item">Who</a>
         <a href="#skills" class="list-inline-item">What</a>
         <a href="#proj" class="list-inline-item">Projects</a>
         <a class="list-inline-item">Contact</a>
       </ul>
     </div>
  </div>
<div class="grid-container">

  <div id="who" class="hi">
    <img src="photo.png" alt="photo">
    <p id="para">
      Hi! I'm Avichai, <br> I'm a 22 y/o junior web developer and designer. <br> My knowledge is based mainly <br> on my high school computer science extension, <br> my continuous self-learning and curisity.
    </p>
  </div>
  <div id="skills" class="what">
    <h1>Knowledge and Skills</h1>
    <img src="3logo.png">
  </div>

  <div id="proj" class="projects">


    <div class="pContainer">
      <div class="headline">
        <h1>Projects</h1>
      </div>
      <div class="p1"></div>
      <div class="p2">Lone Soldier Realty</div>
      <div class="p3">Freelance Graphic Design</div>
      <div class="p4"></div>
    </div>
    <div id="contact" class="contact">


    </div>

  </div>