Comment créer un Div « Coller » en haut de l'écran lors du défilement ?

Comment garder un Div fixé en haut de l'écran lors du défilement au-delà

Problème :

Vous avez un div qui se trouve initialement à 100 pixels du haut de la page et contient des boutons ou des commandes essentiels. Lorsque l'utilisateur fait défiler ce div, vous souhaitez qu'il "colle" en haut de l'écran pour un accès facile. Lorsque l'utilisateur fait défiler vers le haut, vous souhaitez qu'il revienne à sa position d'origine.

Solution :

Le secret réside dans l'utilisation de la propriété position:fixed mais seulement après l'utilisateur a fait défiler le div. Voici comment y parvenir :

JavaScript :

<code class="javascript">var $window = $(window),
    $stickyEl = $('#the-sticky-div'),
    elTop = $stickyEl.offset().top;

$window.scroll(function() {
    $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});</code>

Ce code capture l'événement de défilement de la fenêtre et applique dynamiquement une classe CSS "collante" lorsque l'utilisateur fait défiler l'écran. le haut du div.

CSS :

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>

Ce CSS définit la classe "sticky" pour que le div adhère au haut de l'écran. Par défaut, position:fixed place le div par rapport à la fenêtre, garantissant qu'il reste en haut tout au long du défilement.

Comment ça marche :

Lorsque la page se charge, le div est positionné à 100px du haut. Au fur et à mesure que l'utilisateur fait défiler vers le bas, le JavaScript vérifie si la position de défilement actuelle dépasse la position supérieure initiale du div. Si tel est le cas, il applique la classe "sticky" au div, le fixant ainsi en haut de l'écran. Lorsque l'utilisateur fait défiler vers le haut, le processus est inversé et la classe « collante » est supprimée, permettant au div de reprendre sa position initiale.

En résumé, cette solution fait effectivement en sorte qu'un div « s'accroche » au en haut de l'écran lorsqu'un utilisateur le fait défiler tout en lui permettant de revenir à sa position d'origine lorsque l'utilisateur fait défiler vers le haut.

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!