Comment créer un Div \'Stick\' en haut de la page lors du défilement ?

Position de la division en haut de l'écran lors du défilement vertical

Question :

Comment puis-je faire un div « colle » en haut d'une page Web lorsqu'un utilisateur la fait défiler ? Après être revenu en haut de la page, je souhaite que le div revienne à sa position d'origine.

Solution :

La clé de cette fonctionnalité est de définir la position : fixe sur le div seulement après que l'utilisateur l'ait fait défiler. Pour y parvenir, nous pouvons utiliser un gestionnaire attaché à l'événement window.scroll :

<code class="javascript">// Cache selectors 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 ajoute une classe CSS collante au div lorsque la page défile devant elle et supprime la classe lorsque la page revient vers le haut. La classe CSS est définie comme :

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

Lorsque la classe collante est ajoutée, le div prendra une position fixe et restera en haut de l'écran. Il reviendra à sa position d'origine lorsque la classe sera supprimée.

Remarque : Le code a été optimisé pour mettre en cache les objets jQuery pour des performances améliorées.

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!