我有两个 div,一个在顶部 (div1),一个在底部 (div2)。
我希望实现的目标是:div2 应始终比 div1 低 400 像素,但是...我希望 div2 的左侧、底部和右侧始终与浏览器窗口齐平。无论屏幕尺寸如何,这 3 个边都应始终齐平。我该怎么做?
到目前为止我尝试了什么:
.background-oval {
background-color: #999;
border-top-left-radius: 100%100px;
border-top-right-radius: 100%100px;
bottom: 0;
height: 400px;
position: absolute;
width: 100%;
}
最佳答案
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
document.body.addEventListener("scroll", function(e) {
div2.style.top = Math.max(
- -(div2.style.top.slice(0, -2)) + div2.height + 400,
document.body.scrollTop + innerHeight - div2.height
) + "px";
}
注意:- -
是一种将字符串转换为数字的方式
注2:假设div2有一个位置属性和一个高度
关于html - 保持 div2 与屏幕的左侧、底部和右侧齐平,但始终低于 div1 上方 400px?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38515117/