Change text from a Div progressively when another Div goes over it

Question

I have 2 Div filled with some text and a 3rd one in between, and I want, when the 3rd one goes above the 1st one, to progressively change the Div. I don't know if I'm explaining this correctly, here's some code to illustrate my

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/

The scrolling div gives the impression to "change" the background image, but the text follows the scrolling progression, and I want the text to change only when the scrolling div reaches the text of the 1st Div. In other words I want the user to feel that the scrolling div does the changes behind it.

I'm sorry, I'm probably not being very clear.

score 0 · Answer 1 · answered Feb 21 '17 at 00:58

0

You can make the Panel 1

outside the panel and in the container and make it fixed in css. Then in JQuery check onscroll when the scroller reaches the top and changes the text of

to Panel 2:

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

Of course this is just a suggestion there's a better way to write this code!

answered Feb 21 '17 at 00:58

mazen el zoor

305
4
16

Thanks, I tried some things with your answer in mind and I've been able to do what I wanted – Prototype Feb 21 '17 at 02:38

score 0 · Answer 2 · answered Feb 21 '17 at 02:37

Okay I've manage to do what I wanted with a JQuery function. Here's a working snippet ( feel free to improve it )

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});

    });
});

Changing the Height of a Div according to the Scrollable one did the trick. However, the bad side is I have to "pile" the Div with a z-index in order to give the impression the Scrollable div changes what goes under it.

Anyway, it's good enough !

Change text from a Div progressively when another Div goes over it

2 Answers2