Maison > interface Web > tutoriel CSS > le corps du texte

Comment faire en sorte qu'un Div colle en haut de l'écran après l'avoir fait défiler ?

Linda Hamilton
Libérer: 2024-10-31 14:00:02
original
526 Les gens l'ont consulté

How to Make a Div Stick to the Top of the Screen After Scrolling Past It?

Ancrer une division en haut de l'écran lors du défilement

Lors du développement de pages Web interactives, il est souvent souhaitable d'avoir des éléments qui suivent les préférences de l'utilisateur. faites défiler, en particulier lorsque vous atteignez des sections spécifiques. Un de ces scénarios implique un div positionné près du haut de la page mais qui devrait « s'accrocher » à l'écran lors du défilement.

Solution

Pour obtenir cet effet, une combinaison créative de JavaScript et CSS est utilisé. Un style position:fixed est appliqué au div, mais seulement après que l'utilisateur l'a fait défiler.

Voici comment y parvenir :

<code class="javascript">// Cache jQuery objects for improved performance
var $window = $(window),
    $stickyEl = $('#the-sticky-div'),
    elTop = $stickyEl.offset().top;

$window.scroll(function() {
  $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});</code>
Copier après la connexion

Ce code JavaScript ajoute un gestionnaire d'événements au événement window.scroll, qui surveille la position de défilement. Lorsque le scroll dépasse la position initiale du div (elTop), une classe CSS « ​​collante » y est ajoutée. Cette classe contient les styles CSS suivants :

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>
Copier après la connexion

En conséquence, le div prend une position fixe et reste en haut de la page tant qu'il défile. Lorsque l'utilisateur revient vers le haut, la classe collante est supprimée et le div revient à sa position d'origine.

Cette solution combine la puissance de JavaScript et CSS pour créer une expérience réactive et conviviale en gardant éléments importants à portée de main, quelle que soit la position de défilement de la page.

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!