Scrolling a div over another div

Question

is it possible to see all the content in the top div before the second div scrolls over.

Check the fiddle

many thanks for looking.

.div-top{
height:auto;
min-height:100%;
width:100%;    
position:fixed;
top:0;
left:0;
background:#ff0;
z-index:500;
}


.div-bottom {
width:100%;    
background:#0ff;
margin-top:100%;
z-index:600;
position:relative;
}

It isn't clear what you're trying to do. Can you update this question to reflect the conversation with @Naeem? (To start with - - seems like the question he's answered is still not the one you're after) — henry, Jan 29 '15 at 14:38

Naeem Shaikh · Accepted Answer · 2015-01-29T14:10:04.693

1

What you want is though not possible with css, you can do it with jquery : http://jsfiddle.net/KyP8L/92/

Just check the scroll, if it reaches top, then assign the z-index(higher) to the .div-bottom

$(window).on('scroll',function(){
$(window).scrollTop() ;
    ;

    if($(window).scrollTop()> parseInt($('.div-bottom').css('margin-top')))
    {
        $('.div-bottom').css('z-index','600');
    }else{
         $('.div-bottom').css('z-index','0');
    }

    console.log('top'+$('.div-bottom').css('margin-top'))
  console.log('scroll'+$(window).scrollTop())    

                           });

Edit:

As the OP says in comments what he wants is, to be able to scroll down the top div and then I want the bottom div to scroll over the top div

here is the fiddle http://jsfiddle.net/KyP8L/108/

edited Jan 29 '15 at 14:10

answered Jan 29 '15 at 12:56

Naeem Shaikh

15,331
6
50
88

Hey Naeem, Thanks for your answer but unfortunately its not working. Any ideas? – Rico Shaft Jan 29 '15 at 13:06
I want to be able to scroll down the top div and then I want the bottom div to scroll over the top div. – Rico Shaft Jan 29 '15 at 14:07
@RicoShaft.. updated the answer, see the jsfiddle included.. did this help you – Naeem Shaikh Jan 29 '15 at 14:10
Hey Naeem, thanks a lot for your answer. I've also tried overflow:scroll; before but wasn't to happy with the results. There must be a jQuery way but I don't know how. – Rico Shaft Jan 29 '15 at 14:27
you can just hide the scrollbar. you will just need to add some more css and html.. http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page – Naeem Shaikh Jan 29 '15 at 14:32

maioman · Answer 2 · 2015-01-29T13:22:30.237

0

I don't actually understand what you mean by scrolls over,

but setting.div-top{ height:100%}
will let you entirely visualize div-top befor getting to the second div.

And still setting .div-top to fixed wouldn't have sense.

edited Jan 29 '15 at 13:22

answered Jan 29 '15 at 13:16

maioman

18,154
4
36
42

Scrolling a div over another div

2 Answers2