Comment réparer un Div en haut de l'écran lors du défilement ?

Fixer un Div en haut de l'écran lors du défilement

Le positionnement des éléments sur une page Web peut améliorer l'expérience utilisateur et l'organisation. Un scénario courant consiste à fixer un div en haut de l'écran lorsqu'il atteint un certain point de défilement.

Pour y parvenir, il existe plusieurs approches, dont l'une consiste à utiliser exclusivement CSS. En définissant la position de l'élément sur fixe, il restera ancré en haut de l'écran une fois qu'il aura défilé jusqu'à :

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

Cependant, cette approche suppose que l'élément est initialement positionné de manière absolue. Lorsque le décalage de défilement souhaité est atteint, sa position doit être modifiée en fixe et la propriété top doit être réinitialisée à zéro. Pour déterminer le décalage de défilement, JavaScript peut être utilisé pour surveiller la fonction scrollTop du document :

$(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': 'static', 'top': '0px'}); 
  } 
});

Dans ce script, lorsque le décalage de défilement atteint 200 pixels, l'élément passe à une position fixe en haut. de l'écran. Lorsque le décalage descend en dessous de 200 pixels, l'élément revient à sa position précédente. Cette technique permet une transition en douceur du div lorsque l'utilisateur fait défiler 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!