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
Libérer: 2024-12-18 19:23:09
original
798 Les gens l'ont consulté

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()));
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal