Maison >interface Web >tutoriel CSS >Comment arrêter le défilement d'un élément à position fixe à un point spécifique à l'aide de jQuery ?

Comment arrêter le défilement d'un élément à position fixe à un point spécifique à l'aide de jQuery ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-18 19:23:09799parcourir

How to Stop Scrolling a Fixed-Position Element at a Specific Point Using jQuery?

Comment arrêter le défilement à une position fixe

Vous souhaitez qu'un élément avec un positionnement fixe défile avec la page jusqu'à ce qu'il atteigne un point spécifique (par exemple, 250 px du haut de la page), après quoi le défilement devrait cesser. Examinons une solution utilisant jQuery.

Implémentation de jQuery

Le code suivant atteint ce que vous visez :

$(window).scroll(function() {
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});

Dans ce code :

  • $(window).scroll(function() { ... }) lie un écouteur d'événement au défilement de la fenêtre événement.
  • Lorsque la page défile, le code calcule la nouvelle position de l'élément avec l'ID #theFixed.
  • Math.max(0, 250 - $(this).scrollTop( )) garantit que l'élément ne dépasse pas 0 px ou ne dépasse pas 250 px à partir du haut du page.
  • $(#theFixed).css("top", ...) définit la nouvelle position supérieure pour l'élément fixe.

Exemple d'implémentation

Le violon suivant montre comment cela fonctionne :

[JS Fiddle](insérer l'URL du violon ici)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn