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

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>

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>

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!