Getting dynamic css top value from element using jQuery

Question

I am using the jScrollPane jQuery plugin in a project, and the scrollable area has a couple of list item elements, and each list item when is clicked it needs to trigger a modal box positioned absolute from in the center, filling all the space. Anyway its kind of hard to explain, but this is not the problem. The problem is that, I need to get the negative top css value (when it scrolls down) via jQuery and I can't manage to make it work, i tried using the .css() selector but it always returns 0px even if in the source shows different. Any idea ?

EDIT:

<div id="provider-menu">
    <ul>
        <li class="menu-item"> <h2> content here </h2>
             <div class="more-info">
               more info box here 
             </div>
        </li>

        <!-- More List Items Here -->

    </ul>
</div><!-- end #provider-menu -->

<!-- Javascript -->
$("#provider-menu").jScrollPane();
// jspPane is added by the plugin
var topValue = $(".jspPane").css("top"); // returns 0px every time on scroll even if in the source is different.

I am trying to do this because I can't change the HTML structure, the .more-info div has to fill the #provider-menu box which has a predefined width and height, but if I set it to absolute top left right bottom it goes to top and you have to scroll to see what's there. So I was thinking on getting the top negative value, remove the minus and set the top value to the .more-info box.

Answer 1

$(element).css behaves differently than you might expect.

This actually works: $(".jspPane")[0].style.top

What you have demands absolute positioning I believe, which jspPane does not have. Either way, the above code gives you that actual ( usually negative ) pixel value.