Comment créer un div défilant qui colle au haut de l'écran ?

Création d'un div défilant qui colle au haut de l'écran

Lorsque vous souhaitez qu'un élément reste ancré en haut de l'écran même si la page défile, vous pouvez créer un div "collant". Voici comment :

Utilisation de Pure CSS :

.fixedElement {
    background-color: #c0c0c0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

Méthode alternative avec jQuery :

En utilisant jQuery, vous pouvez obtenir le même effet avec plus de flexibilité. Positionnez l'élément comme suit :

.fixedElement {
    position: absolute;
    top: 100px; // Replace with desired initial top offset
}

Ensuite, détectez le décalage de défilement à l'aide de JavaScript :

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'absolute', 'top': '100px'}); // Adjust top offset as needed
  } 
});

Une fois que le décalage de défilement dépasse une valeur spécifiée (200 px dans cet exemple), le div sera fixé en haut de l’écran. Lorsque le décalage de défilement descend en dessous de cette valeur, il reviendra à sa position initiale.

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!