jQuery Offset and Page Scroll for Drop Down Menu

Question

I've got a small issue with the .offset().top value in jQuery.

I'm making a drop down menu function that binds to my selector as follows:

$('.navButton').mouseenter(
    function(){

        var x = $(this).offset().left;
        var y = $(this).offset().top;

        var height = $(this).height();

        var dList = $(this).find('.dropDownList').css('display','block');
        $(dList).css('left',x);
        $(dList).css('top',y+height);


    }

);

It works magically until I scroll the page down and my .dropDownList continues to display at the offset position. In other words. If my div that activates the function is at y:200px and the page is not scrolled, the drop down list appears nicely under my .navButton. But, when I scroll the .dropDownList continues to appear at y:200px even though my .navButton is really only at y:100px now.

Thoughts?

Answer 1

You should sum scrollTop() too

$('.navButton').mouseenter(function(){
  $('.dropDownList', this).css({
    'display': 'block',
    'left': $(this).offset().left,
    'top': $(this).offset().top+$(this).height()+$(document).scrollTop()
  });
});