css 向下滚动使div的粘在顶部后，每一个

oogrdqng 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(105)

我有好几章（1，2和3）和每一章都有文字在他们下面。向下滚动时，我需要的章节坚持到顶部，但一个接一个你越向下滚动。每一章都有不同的高度（因为它们的内容，也因为不同的屏幕尺寸）。如何使其工作？我不知道如何使高度变量和堆叠的章节一个接一个向下滚动时。top-0应该是top minus height of previous chapter，但如何得到variable height of the previous chapter？这里的基本代码。

<div>
  <div className="sticky top-0 z-10 w-full bg-red-400">
    <h1>
      Chapter 1 div – big height big height big height big height big height big
      height
    </h1>
  </div>
  <p>
    Here text – here text - Here text – here textHere text – here textHere text
    – here textHere text – here text Here text – here text - Here text – here
    textHere text – here textHere text – here textHere text – here textHere text
    – here text - Here text – here textHere text – here textHere text – here
    textHere text – here textHere text – here text - Here text – here textHere
    text – here textHere text – here textHere text – here textHere text – here
    text - Here text – here textHere text – here textHere text – here textHere
    text – here text
  </p>
  <div className="sticky top-0 z-10 w-full bg-green-400">
    <h1>
      Chapter 2 div – biggest height biggest heightbiggest heightbiggest
      heightbiggest height heightbiggest heightbiggest heightheightbiggest
      heightbiggest heightheightbiggest heightbiggest height
    </h1>
  </div>
  <p>
    More words – more words - More words – more words - More words – more words
    - More words – more words - More words – more words - More words – more
    words -{" "}
  </p>
  <div className="sticky top-0 z-10 w-full bg-yellow-400">
    <h1>Chapter 3 div – small height </h1>
  </div>
  <p>
    Read this - Read this - Read this - Read this - Read this - Read this - Read
    this - Read this - Read this - Read this - Read this -{" "}
  </p>
</div>;

字符串
在这张图片中，你可以看到我的目标。右边的第二张图片显示了它应该如何向下滚动。所以一个接一个的章节水平堆叠。

css

来源：https://stackoverflow.com/questions/77775229/scrolling-down-makes-divs-stick-to-top-after-eachother

1条答案

按热度按时间

jecbmhm31#

我不知道有任何纯CSS解决方案来顺序堆叠CSS位置sticky元素。你需要分配top值来实现这一点- JavaScript似乎是唯一的方法：

const els = (sel, par) => (par || document).querySelectorAll(sel);

const stickables = () => {
  els(".stickables").forEach(elGroup => {
    let prevHeight = 0;
    els(".sticky", elGroup).forEach((elSticky) => {
      if (prevHeight) {
        elSticky.style.setProperty("--y", prevHeight);
      }
      prevHeight += elSticky.clientHeight;
    });
  });
};

addEventListener("resize", stickables);
addEventListener("load", stickables);
stickables();

* { margin:0; box-sizing: border-box; }
.top-0 { top: 0; }
.bg-red-400 { background: hsl(0 80% 50%); }
.bg-green-400 { background: hsl(100 80% 50%); }
.bg-yellow-400 { background: hsl(60 80% 50%); }

.stickables {
  max-width: 500px;
  margin: 0 auto;
}

.sticky {
  position: sticky;
  top: calc(var(--y, 0) * 1px);
}

<div class="stickables">
  <div class="sticky bg-red-400">
    <h1>
      Chapter 1 div
    </h1>
  </div>
  <p style="height: 100vh;">Long text... scroll down...</p>
  <div class="sticky bg-green-400">
    <h1>
      Chapter 2 div – biggest height biggest heightbiggest heightbiggest heightbiggest height 
    </h1>
  </div>
  <p style="height: 100vh;">Long text... scroll down...</p>
  <div class="sticky bg-yellow-400">
    <h1>Chapter 3 div – small height </h1>
  </div>
  <p style="height: 100vh;">Long text... scroll down...</p>
</div>

无论如何，这似乎是你在找麻烦。有人在一个狭窄的高度显示-在所有的标题坚持低于对方，你运行的风险，无法正确阅读的内容。
如果你不考虑这一点......似乎是一个很酷但失败的方法来实现一些不寻常的：）

赞(0）回复(0）举报 2024-01-09

我来回答

css 向下滚动使div的粘在顶部后，每一个

1条答案

相关问题

热门标签

最新问答