Question

我有2个Div填充了一些文本，第3个填充在其中，我希望，当第3个高于第1个时，逐渐改变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到达第1 Div的文本时才会改变。换句话说，我希望用户感觉到滚动div会在其后面进行更改。

对不起，我可能不太清楚。

Answer 1

您可以在面板和容器外部制作面板1

，并将其固定在css中。然后在JQuery中，当滚动条到达顶部时检查onscroll并将

的文本更改为Panel 2：

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

当然，这只是一个建议，这是编写此代码的更好方法！

Answer 2

好吧，我已经设法通过JQuery功能完成我想要的工作。这是一个工作片段（随意改进）

DEMO

JQuery的

$(document).ready(function() {
    $(window).scroll(function() {

    var top1 = $('#scrollingdiv').offset().top - $(this).scrollTop();

    var top2 = $('#scrollingdiv2').offset().top - $(this).scrollTop();

    $('#panel1').css({'height': top1});

    $('#panel2').css({'height': top2});

    });
});

根据Scrollable改变Div的高度就可以了。然而，坏的一面是我必须＆＃34;桩＆＃34;具有z-index的Div为了给出Scrollable div改变其下的内容的印象。

无论如何，它还不错！

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

2 个答案: