Jquery si le défilement a une certaine quantité de pixels

Question

Existe-t-il une fonction jQuery intégrée pour déterminer la longueur d'un défilement?

J'essaie d'écrire une fonction qui ajoutera une classe à une div si l'utilisateur a fait défiler 50 pixels du haut.

Ainsi, le code ressemblera à ceci:

if(userHasScrolled) {
     $('#myDiv').addClass('hasScrolled');

}

Answer 1

Vous pouvez vérifier $(document).scrollTop() à l'intérieur d'un gestionnaire de défilement:

var $document = $(document),
    $element = $('#some-element'),
    className = 'hasScrolled';

$document.scroll(function() {
  if ($document.scrollTop() >= 50) {
    // user scrolled 50 pixels or more;
    // do stuff
    $element.addClass(className);
  } else {
    $element.removeClass(className);
  }
});

Si l'ajout du nom de classe est tout ce que vous voulez (aucune autre action nécessaire), cela pourrait être raccourci comme suit:

var $document = $(document),
    $element = $('#some-element'),
    className = 'hasScrolled';

$document.scroll(function() {
  $element.toggleClass(className, $document.scrollTop() >= 50);
});

Voir http://api.jquery.com/scrollTop/ .

Notez qu'il est très inefficace d'utiliser les gestionnaires d'événements scroll.