Make a div disappear after passing another one

Asked Mar 17 '17 at 14:31

Active Mar 17 '17 at 15:39

Viewed 49 times

I have this small version of what i am trying to do:

HTML

<body>
<div class="container-empty"></div>
<ul>
<div id="divfix"><li id="lifix">Text 1 FIXED</li></div>
<div id="divfix2"><li id="lifix2">Text 2 FIXED</li></div>
<div id="divfix3"><li id="lifix3">Text 3 FIXED</li></div>
</ul>
<div class="container-footer"></div>
</body>

JAVASCRIPT

var toppag=$("#lifix,#lifix2,#lifix3");
var pag=$("#divfix,#divfix2,#divfix3");

toppag.css({position:"relative"});


$(window).scroll(function () {
var scroll=$(this).scrollTop();
pag.each(function(i,n){
    if(scroll < $(this).offset().top) {
        toppag.eq(i).css({'position':'relative'});
    }
    if(scroll > ($(this).offset().top + toppag.eq(i).height()))  {
        toppag.eq(i).css({'position':'fixed',"top":"0"});
    }
}); 
});

The full code running here: https://jsfiddle.net/Kigris/4cb0ygun/2/

What i want is to make disappear "Text 1 FIXED" when it reach "Text 2 FIXED" and so on. Also i want to make them all disappear when they reach the footer.

edited Mar 17 '17 at 15:39

Grant Birchmeier

17,809
11
63
98

asked Mar 17 '17 at 14:31

Kigris

you're html is invalid, you need to swap the li and divs around – Pete Mar 17 '17 at 14:41
I don't think so. I did it and it's not working as I like. Send me yours please. – Kigris Mar 17 '17 at 14:43
1

No, my comment is just a general observation about your code - it won't fix your issue but will fix your html – Pete Mar 17 '17 at 15:11
Divs are not allowed to contain list items. See http://stackoverflow.com/questions/8557869/is-this-html-structure-valid-ul-div-li-li-div-li-li-div – Theodore K. Mar 17 '17 at 15:29
That's not my problem. Read the question again. – Kigris Mar 17 '17 at 15:36

Make a div disappear after passing another one

0 Answers0