在DIV中滚动时的DIV位置

Question

I have a question for you. I'm using this plugin called jScrollPane . It's pretty cool, I love it.

Now, I have to get the top position of a div somewhere in the page when I scroll up/down INSIDE the jscrollpaned DIV. If I use $(window).scroll(); it's just working. But this function is not what I need. I need a function which called when I scroll in that DIV.

So $('.scroll-pane').scroll(); does not work (neither any of its container).

Here is the code to understand. This is working:

$(window).scroll(function() {
    var head_pos = $('.lister-head').offset();
});

I stucked. Can somebody help me, please?

Answer 1

here is the workaround,

<div style="position:fixed; margin-left:300px; font-size:24px; text-decoration:none; font-weight:bold; font-style:normal;">
<a href="#whatisit">What is it</a>
<a href="#desc">Description</a>
<a href="#faq">FAQ</a>
</div>

<div id="clockbox" style="height:4000px;">
<h1 id="whatisit" style="height:400px;">What is it</h1>
<h1 id="desc" style="height:400px;">Description</h1>
<h1 id="faq" style="height:400px;">FAQ</h1>


</div>

And the script,

$(window).scroll(function() {

if(parseInt($('#whatisit').offset().top)  + $('#whatisit').height() >= ($(window).scrollTop())){ 
    $('a').css('color','blue');
    $('a[href="#whatisit"]').css('color','black');
}
else if(parseInt($('#desc').offset().top) + $('#desc').height()>= ($(window).scrollTop())){ 
    $('a').css('color','blue');
    $('a[href="#desc"]').css('color','black');
}
else if(parseInt($('#faq').offset().top) + $('#faq').height() >= ($(window).scrollTop())){ 
    $('a').css('color','blue');
    $('a[href="#faq"]').css('color','black');
}

});

You can use % height also or even don't use it. No matter what you will get the position. For better understanding I have specified the height.

I think you will get an idea to bend it your way. Cheers :).

Answer 2

Without a clear example, hard to help, but i wanted to have a look to that library, so i can maybe help now :

peduarte was surely right, your answer is around the API, and more specifically around event fired by that library , which is quite simple:

You should bind the event for scrolling, depending on the way you are scrolling, and you have then access to the context of the scrollpane object almost everywhere.

I played a bit in JSFiddle, have a look : JSFiddle JsScrollPane sandbox ;)