我正试图从中得到
向下滚动大约一半的图片时。滚动菜单后,标题将不可见。有人对如何实现这一目标有任何想法吗?
有一些方法可以实现此目的,因为您没有共享任何代码,很难更好地解释任何内容,因此您可以在滚动所在的背景上听取更改,并根据该数字更新标题的位置,我在这里给您一个简单的示例,您可以自己进行测试以了解我的意思
如果您不了解任何内容,请随时提出或讨论
HTML
<div id="box">
<div id="box-to-force-scroll">
<div id="title"> title </div>
</div>
</div>
CSS
#box {
width:100px;
height:100px;
background-color:blue;
overflow:auto;
}
#box-to-force-scroll {
width:100px;
height:1000px;
}
#title {
font-size:20px;
position:absolute;
top:10px;
left:10px;
color:white;
text-transform:uppercase;
}
JS
document.getElementById('box').addEventListener('scroll',function(el) {
// random math just to show it moving
let scrollTop = el.target.scrollTop
let newVal = 10 + ( parseInt(scrollTop,10) / 3)
document.getElementById('title').style.top = `${newVal}px`
})