纯CSS覆盖滚动 [英] Pure CSS overlay scrolling

问题描述

仅使用css和html，是否有可能在向下滚动页面的其余部分之前完全滚动掉内部div(重叠红色div)?本质上，想知道仅在CSS中是否可能在冻结后面的div时进行覆盖滚动?然后，一旦红色div消失，就解冻背景滚动并继续.与此处的此站点类似: https://humaan.com/.还是需要使用某种JavaScript?

using only css and html, is it possible to scroll away the inner div (overlay red div) completely before scrolling down the rest of the page? Essentially, wondering if overlay scrolling while freezing the behind div is possible in only css? Then once the red div is gone, unfreeze the background scrolling and continue on. Similar to this site here: https://humaan.com/ . Or would some sort of JavaScript need to be used?

.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>

推荐答案

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覆盖滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！