纯CSS覆盖滚动
纯CSS覆盖滚动
提问于 2020-12-31 16:04:28
只使用css和html，在向下滚动页面的其余部分之前，是否可以完全滚动掉内部div (覆盖红色div)？本质上，想知道只有在css中是否可以在冻结后面div的同时进行覆盖滚动？然后，一旦红色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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-31 16:41:18
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>
Stack Overflow用户
发布于 2020-12-31 16:36:05
有了CSS，你可以使用use the hover event to detect a certain scroll position (例如，在红色div后面的东西)，但这在手机等仅限触摸的设备上不起作用。这也是不可靠的，因为光标可能在屏幕上的任何地方。
使用JavaScript来检测滚动位置将是必要的。但是，您可以只使用JavaScript在不同的滚动位置添加一个类，然后使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65518213
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号