Décalage jQuery et défilement des pages pour le menu déroulant

Question

J'ai un petit problème avec la valeur supérieure .offset(). Dans jQuery.

Je fais un menu déroulant fonction de menu qui se lie à mon sélecteur comme suit:

$('.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); 


    } 

); 

Il fonctionne comme par magie jusqu'à ce que je défiler la page vers le bas et mon .dropDownList continue d'afficher à la position décalée. En d'autres termes. Si ma div qui active la fonction est à: 200px et que la page ne défile pas, la liste déroulante apparaît bien sous mon .navButton. Mais, quand je défile, le fichier .dropDownList continue à apparaître à y: 200px même si mon .navButton est vraiment seulement à y: 100px maintenant.

Pensées?

Answer 1

Vous devriez résumer scrollTop() trop

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