我有 2 个 Div,其中填充了一些文本,中间有第 3 个,我希望,当第 3 个超过第一个时,逐渐更改 Div。我不知道我是否解释正确,这里有一些代码来说明我的
HTML
<div id="container">
<div id="panel">
<p>
Panel 1
</p>
</div>
<div id="scrollingdiv">
<p>Scrolling Div</p>
</div>
<div id="panel2">
<p>
Panel 2
</p>
</div>
</div>
CSS
#container{
position: relative;
width: 900px;
}
#panel, #panel2{
height: 600px;
background-attachment: fixed;
}
#panel{
background: url('http://www.drodd.com/images15/letter-b25.jpg') center 0 no-repeat fixed;
}
#panel2{
background: url('http://www.drodd.com/images15/letter-c25.jpg') center 0 no-repeat fixed;
}
#scrollingdiv{
background-color: white;
}
https://jsfiddle.net/m4um9ow4/
滚动的 div 给人的印象是“改变”了背景图像,但文本跟随滚动的进行,我希望只有当滚动的 div 到达第一个 Div 的文本时文本才会改变。换句话说,我希望用户感觉到滚动的 div 会在其背后进行更改。
对不起,我可能不是很清楚。
最佳答案
您可以将面板 1
制作在面板外和容器中,并使其固定在 css 中。然后在 JQuery 中,当滚动条到达顶部时检查 onscroll 并将
的文本更改为面板 2:
$("body").on("scroll", function() {
if( $("#scrollingdiv").top() < 10) {
$("#panel-text").html("Panel 2");
} else {
$("#panel-text").html("Panel 1");
}
});
当然这只是一个建议,还有更好的方法来编写这段代码!
关于html - 当另一个 Div 越过它时,逐渐更改 Div 中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42356291/