fixed overlay - scrolltop doesn't address the div

Question

Short story: I have a an overflow/lightbox div (kind of like behance or pinterest) popup when you press a link. I now what to determine the scrolltop of the inside of the lightbox. But JS doesn't see it. Any advice?

in chrome!

Long story:

css

 html, body {width:100%; height:100%; overflow:auto;}

 .overflow {
    display: none; 
    bottom: 0;right: 0;top: 0;left: 0;
    margin: 0;
    overflow-y: scroll;
    position: fixed;    
    z-index: 999;}


.inside{
    cursor: default;
    z-index: 1000;
    position: absolute;
    background-color:yellow;}

html

 <div>this is a body text with <a href="#lightbox">lightbox trigger</a></div>
 <div class="overflow">
     <div class="inside">
       this is lightbox text<br/>
       it scrolls while body stays fixed<br />
       I need to know how much it scrolled with scrollTop (or whatever!)
     </div>
 </div>

js

$("a").click(function(){    
    $(".overflow").show();
    $("body").css("overflow", "hidden");
}); 

$(window).scroll(function(e){
    var x = $(".inside").scrollTop();
    console.log(x); //shows 0!
});

I tried putting together a very improvised jsfiddle http://jsfiddle.net/Q7XVL/2/

as you see inside the blue box - browsers don't see scrolltop inside fixed div! any advice?

Answer 1

You're actually scrolling the .overflow which is being overflown, not .inside which causes the overflow

So you need to get the scrollTop of .overflow instead of .inside

$(window).scroll(function(e){
    var scrolltop = $(window).scrollTop();
    var scrollinside = $(".overflow").scrollTop();
$("#console").html("body: "+scrolltop+"px; <br /> fixed div: "+scrollinside+"px");  
});

Updated JSFiddle