嵌套的 flexboxes 和 position:sticky 用于顶部和底部？

Question

我正在尝试让一列 flexboxes 将它们的部分 headers 粘贴到顶部和底部，到目前为止，我只能让顶部的部分适当地粘贴。

我读过一大堆文档说 flexboxes、溢出和几乎所有我正在使用的其他东西都不能很好地与 position: fixed 一起工作，但是根据经验 top: 0 只能工作很好。

我是否遗漏了一些东西来使顶部和底部粘滞的布局正常工作headers？

代码笔：https://codepen.io/turt2live/pen/bGEebve

const list = document.querySelector(".actualList");
for (let i = 0; i < 20; i++) {
  const sublist = document.createElement("div");
  sublist.classList.add("sublist");
  
  const name = document.createElement("div");
  name.classList.add("name");
  name.innerText = `Test ${i + 1}`;
  sublist.appendChild(name);
  
  const rooms = document.createElement("div");
  rooms.classList.add("rooms");
  for (let j = 0; j < 4; j++) {
    const room = document.createElement("div");
    room.classList.add("room");
    room.innerText = `Room ${j + 1}`;
    rooms.appendChild(room);
  }
  sublist.appendChild(rooms);
  
  list.appendChild(sublist);
}

body, html {
  height: 100vh;
  margin: 0;
}

.body {
  height: 100vh;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
}

.chat {
  background-color: aliceblue;
  width: 100%;
  height: 100vh;
  display: flex;
}

.left {
  width: 300px;
  height: 100vh;
  background-color: pink;
  display: flex;
  flex-direction: column;
}

.header {
  border-bottom: 1px solid red;
  width: 100%;
  height: 37px;
}

.list {
  overflow: auto;
  display: flex;
}

.actualList {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sublist {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.name {
  position: sticky;
  bottom: 0; /* This doesn't appear to be working */
  top: 0;
  margin: auto;
  background-color: coral;
  width: 100%;
}

.room {
  padding-left: 10px;
}

<div class="body">
  <div class="wrapper">
    <div class="chat">
      <div class="left">
        <div class="header">
          <b>Alice</b>
          <div>Menu options</div>
        </div>
        <div class="list">
          <div class="actualList">
            <!-- generated -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

（我已经模拟了应用程序的整个 dom 结构，以确保它不是导致问题的其他 parents 之一）。为清楚起见：我希望能够让 Test N headers 粘在容器的顶部和底部。

Answer 1

您的所有粘性元素都需要属于同一个容器才能获得此效果。因此，要么移除 sublist 个容器，要么在其上使用 display:contents。

你需要删除一堆无用的代码。另请注意，为所有元素设置底部粘性只会使最后一个元素可见，因为它位于所有其他元素之上：

const list = document.querySelector(".actualList");
for (let i = 0; i < 20; i++) {
  const sublist = document.createElement("div");
  sublist.classList.add("sublist");
  
  const name = document.createElement("div");
  name.classList.add("name");
  name.innerText = `Test ${i + 1}`;
  sublist.appendChild(name);
  
  const rooms = document.createElement("div");
  rooms.classList.add("rooms");
  for (let j = 0; j < 4; j++) {
    const room = document.createElement("div");
    room.classList.add("room");
    room.innerText = `Room ${j + 1}`;
    rooms.appendChild(room);
  }
  sublist.appendChild(rooms);
  
  list.appendChild(sublist);
}

body, html {
  margin: 0;
}

.wrapper {
  height: 100vh;
  overflow: auto;
}

.chat {
  background-color: aliceblue;
  height: 100%;
}

.left {
  width: 300px;
  background-color: pink;   
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  border-bottom: 1px solid red;
  height: 37px;
}

.list {
  overflow: auto;
}

.actualList {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sublist {
  display: contents;
}

.name {
  position: sticky;
  bottom: 0; /* This doesn't appear to be working */
  top: 0;
  margin: auto;
  background-color: coral;
  width: 100%;
}

.room {
  padding-left: 10px;
}

<div class="wrapper">
    <div class="chat">
      <div class="left">
        <div class="header">
          <b>Alice</b>
          <div>Menu options</div>
        </div>
        <div class="list">
          <div class="actualList">
            <!-- generated -->
          </div>
        </div>
      </div>
    </div>
  </div>

嵌套的 flexboxes 和 position:sticky 用于顶部和底部？

Nested flexboxes and position:sticky for top&bottom?

css

sticky

flexbox