Comment puis-je créer un bâton Div en haut de l'écran lors du défilement ?

Faire coller un Div en haut de l'écran pendant le défilement

Créer un div qui reste fixe en haut de l'écran après un un certain seuil de défilement peut être atteint en utilisant CSS ou JavaScript.

CSS Solution

En utilisant CSS, vous pouvez positionner le div comme fixe une fois que son bord supérieur atteint le haut de l'écran :

.fixed-div {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

Solution JavaScript

Avec JavaScript, vous pouvez modifier dynamiquement la position du div lorsque la position de défilement atteint une valeur spécifique value :

$(window).scroll(function(e) {
    var $div = $('.fixed-div');
    var scrollTop = $(this).scrollTop();
    if (scrollTop > 200) {
        $div.css('position', 'fixed');
        $div.css('top', '0');
    } else {
        $div.css('position', 'static');
        $div.css('top', '0');
    }
});

Dans ce script, la fonction jQuery scroll() est utilisée pour écouter les événements de défilement. Lorsque la position scrollTop dépasse 200, le div reçoit une position fixe et est placé en haut de la page. Lorsque le scrollTop descend en dessous de 200, le div revient à une position statique.

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!