时间戳

首页 > 解决方案 > 粘性到达，非粘性离开（无 JS）

html - 粘性到达，非粘性离开（无 JS）

问题描述

position: sticky由于支持有所改善，因此决定试一试。下面是我创建的一个演示。

html,body{width:100%;height:100%;margin:0}
main{width:57.5vh;height:375vh;position:absolute;left:50%;transform:translateX(-50%);font-family:arial black;color:#fff;background:gold}

.title{--height:25vh;height:var(--height);position:sticky;text-align:center;line-height:var(--height)}
.e{background:pink}
.o{background:skyblue}

main>div:nth-child(1){height:100vh}
main>div:nth-child(2){z-index:5;top:0} /* STEP: 1 */
main>div:nth-child(3){height:75vh}

main>div:nth-child(4){height:150vh;position:sticky;top:25%;border:solid red 2px;box-sizing:border-box}

main>div:nth-child(4)>div:nth-child(1){z-index:3;top:25%} /* STEP: 2 */
main>div:nth-child(4)>div:nth-child(2){height:50vh}
main>div:nth-child(4)>div:nth-child(3){z-index:2;top:50%} /* STEP: 3 */
main>div:nth-child(4)>div:nth-child(4){height:25vh}
main>div:nth-child(4)>div:nth-child(5){z-index:1;top:75%} /* STEP: 4 */

.gap{height:100vh;background:limegreen}
<main>
  <div></div>
  <div class='title e'>STEP: 1</div>
  <div></div>
  <div>
    <div class='title o'>STEP: 2</div>
    <div></div>
    <div class='title e'>STEP: 3</div>
    <div></div>
    <div class='title o'>STEP: 4</div>
    <div class='gap'>GAP</div>
  </div>
</main>

是否可以同时将“STEP 2”、“STEP 3”和“STEP 4”卡片从屏幕上推出，而不是容器底部将它们一张一张推出屏幕？我知道当前的“一对一”行为是正常的，但是是否有一种 hacky 方式，或者更好的是，一种非 hacky 方式来解决这种正常行为？

我尝试过使用bottom而不是top其他一些东西，甚至将三张卡片放在容器中，因为我迫切需要解决方案。

任何帮助将不胜感激。

标签： htmlcss

解决方案

推荐阅读