CODEWITHSUNDEEP
css
Rico Shaft
Rico Shaft

Reputation: 39

Scrolling a div over another div

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

Check the fiddle

http://jsfiddle.net/KyP8L/91/

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

Upvotes: 0

Views: 2107

Answers (2)

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

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/

Upvotes: 1

maioman
maioman

Reputation: 18744

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.

Upvotes: 0

Related Questions