纯 CSS 叠加滚动

Question

仅使用 css 和 html，是否可以在向下滚动页面的其余部分之前完全滚动内部 div（覆盖红色 div）？本质上，想知道在冻结后面 div 的同时覆盖滚动是否仅在 css 中可行？然后，一旦红色 div 消失，解冻背景滚动并继续。类似于此站点：https://humaan.com/。还是需要使用某种 JavaScript？

.headervideo{background-color:blue; width:100%; height:900px;}
.headerbreak{width:100%; height:300px;}

.headervideo #inner-box {
  background-color: red;
  height: 90%;
  width: 100%;
}

<div class="headervideo">
  <div id="inner-box"></div>
</div>

<div class="headerbreak">
<div>

Answer 1

使用 CSS，您可以 use the hover event to detect a certain scroll position（例如，在红色 div 之后的某些内容上），但这不适用于手机等纯触摸设备。它也不可靠，因为光标可能在屏幕上的任何位置。

使用JavaScript 检测滚动位置是必要的。但是，您可以使用 JavaScript 仅在不同的滚动位置添加 class，然后使用 CSS 完成其余部分。这是一个简单的例子：

var red = document.querySelector('#inner-box');
var begin = red.scrollTop;
var end = begin + red.clientHeight;

console.log(begin)

document.body.classList.add('in');

window.addEventListener("scroll", (event) => {

  if(this.scrollY < begin) {
    document.body.classList.add('before');
    document.body.classList.remove('after');
    document.body.classList.remove('in');
  } else if(end < this.scrollY) {
    document.body.classList.remove('before');
    document.body.classList.add('after');
    document.body.classList.remove('in');
  } else {
    document.body.classList.remove('before');
    document.body.classList.remove('after');
    document.body.classList.add('in');
  };
});

.headervideo {
  background-color: blue;
  width: 100%;
  height: 900px;
}

.headerbreak {
  width: 100%;
  height: 300px;
}

.headervideo #inner-box {
  background-color: red;
  height: 90%;
  width: 100%;
}

body {
}

body.before {
  background-color: lightgreen;
}

body.in {
  background-color: lightpink;
}

body.after {
  background-color: lightblue;
}

<body>
  <div class="headervideo">
    <div id="inner-box"></div>
  </div>

  <div class="headerbreak">
    <div>
</body>

Answer 2

position:sticky 可以近似为：

.headervideo {
  background: url(https://picsum.photos/id/1064/800/800) center/cover;
  height: 100vh;
  position: relative;
  z-index: 2;
}

.nextsection {
  background: url(https://picsum.photos/id/107/800/800) center/cover;
  height: 100vh;
  margin-top: -100vh;
  position: sticky;
  top: 0;
}

.container {
  height:200vh;
}

body {
  margin: 0;
}

<div class="container">
  <div class="headervideo"></div>

  <div class="nextsection"></div>
</div>

<div style="height:150vh"> more content later </div>

纯 CSS 叠加滚动

Pure CSS overlay scrolling

html

javascript

css

overlay