title: jQuery Offset and Page Scroll for Drop Down Menu
body: <p>I've got a small issue with the .offset().top value in jQuery.</p>
  
  <p>I'm making a drop down menu function that binds to my selector as follows:</p>
  
  <pre><code>$('.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);
  
  
      }
  
  );
  </code></pre>
  
  <p>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.  </p>
  
  <p>Thoughts?</p>