html - 当另一个 Div 越过它时，逐渐更改 Div 中的文本

Question

我有 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 会在其背后进行更改。

对不起，我可能不是很清楚。

Answer 1

您可以将面板 1

制作在面板外和容器中，并使其固定在 css 中。然后在 JQuery 中，当滚动条到达顶部时检查 onscroll 并将

的文本更改为面板 2:

$("body").on("scroll", function() {
if( $("#scrollingdiv").top() < 10) {
 $("#panel-text").html("Panel 2");
} else {
$("#panel-text").html("Panel 1");
}
});

当然这只是一个建议，还有更好的方法来编写这段代码!