如何创建可堆叠的粘性标题？

问题描述 投票：0回答：1

我目前正在尝试创建一个由不同小节组成的部分。每个小节都有标题和内容。滚动浏览此部分时，标题应始终固定在视口中。第一个标题应固定在视口的顶部，下一个标题应固定在前一个标题的下方，依此类推。

我目前正在通过使各个小节变得粘性来解决整个问题。然后，我总是设置顶部位置，使其包含之前标题的高度。但是，一旦整个部分滚动出视口，固定标题就不会与最后一个标题一起滚动出视口，而是最后一个标题位于前一个标题之上并滚动到它们上方。

我怎样才能实现它，以便所有标题在最后一起滚动出来？

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.section {
  border-bottom: 1px solid #ccc;
}

.section.placeholder {
  height: 30rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgb(131,58,180);
  background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

.category-component {
  position: sticky;
  background: white;
}

.category-component:nth-child(1) {
  top: 0rem;
}

.category-component:nth-child(2) {
  top: 3rem;
}

.category-component:nth-child(3) {
  top: 6rem;
}

.category-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 3rem;
  background-color: lightgrey;
  z-index: 1000;
  padding: 10px;
  font-weight: bold;
}

.category-content {
  padding: 20px;
  margin-top: 0;
  /* Reset margin */
}
<html>
<div class="section placeholder">
  Placeholder Section
</div>
<div class="section">
  <div class="category-component">
    <div class="category-title">Heading 1</div>
    <div class="category-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend,
        ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet
        urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra
        lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer
        vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo
        sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor
        libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.</p>
    </div>
  </div>

  <div class="category-component">
    <div class="category-title">Heading 2</div>
    <div class="category-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend,
        ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet
        urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra
        lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer
        vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo
        sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor
        libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.</p>
    </div>
  </div>

  <div class="category-component">
    <div class="category-title">Heading 3</div>
    <div class="category-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend,
        ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet
        urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra
        lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer
        vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo
        sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor
        libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.</p>
    </div>
  </div>
</div>

<div class="section placeholder">
  Placeholder Section
</div>

</html>

这里还有一个具有相同代码的 codepen 的链接：CodePen

我很高兴得到任何帮助！非常感谢！

html css sticky
1个回答
1
投票

为了设置部分始终可见，那么你需要使用整个页面100vh的视口，最后一部分用

calc(100vh - 16rem)
计算 这适用于桌面宽度尺寸 ~(1024px) 示例片段：

  body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }

      .section {
        border-bottom: 1px solid #ccc;
      }

      .section.placeholder {
        position: sticky;
        height: calc(100vh - 16rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .category-component {
        position: sticky;
        background: white;
      }

      .category-component:nth-child(1) {
        top: 0rem;
      }

      .category-component:nth-child(2) {
        top: 3rem;
      }

      .category-component:nth-child(3) {
        top: 6rem;
      }

      .category-component:nth-child(4) {
        top: 9rem;
      }

      .category-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 3rem;
        background-color: lightgrey;
        z-index: 1000;
        padding: 10px;
        font-weight: bold;
      }

      .category-content {
        padding: 20px;
        margin-top: 0; /* Reset margin */
      }
   <div class="section placeholder">Placeholder Section</div>
    <div class="section">
      <div class="category-component">
        <div class="category-title">Heading 1</div>
        <div class="category-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a
            vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id
            pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla
            facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec
            pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et
            hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit
            elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris
            auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed
            eros feugiat tempus.
          </p>
        </div>
      </div>

      <div class="category-component">
        <div class="category-title">Heading 2</div>
        <div class="category-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a
            vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id
            pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla
            facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec
            pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et
            hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit
            elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris
            auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed
            eros feugiat tempus.
          </p>
        </div>
      </div>

      <div class="category-component">
        <div class="category-title">Heading 3</div>
        <div class="category-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a
            vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id
            pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla
            facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec
            pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet urna et
            hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris auctor libero id dui eleifend, ut fringilla velit
            elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed eros feugiat tempus.Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Sed imperdiet urna et hendrerit convallis. Nunc quis volutpat arcu. Nulla facilisi. Integer vestibulum sollicitudin justo, a vehicula purus tempus in. Mauris
            auctor libero id dui eleifend, ut fringilla velit elementum. Nam eu convallis velit. Quisque nec pharetra lectus. Duis condimentum tristique ligula id pellentesque. Mauris eu justo sed
            eros feugiat tempus.
          </p>
        </div>
      </div>
      <div class="category-component">
        <div class="category-title"></div>
        <div class="category-content">
          <div class="section placeholder">Placeholder Section</div>
        </div>
      </div>
    </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.