Comment garder un Div fixe en haut de l'écran lors du défilement ?

Fixation de la position d'un div en haut de l'écran lors du défilement

Pour créer un div qui colle une fois en haut de l'écran il défile, vous pouvez utiliser la propriété position de CSS. Considérez l'extrait CSS suivant :

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

Modifier :

Pour garantir que l'élément colle correctement, sa position doit initialement être définie sur absolue. Une fois que le décalage de défilement du document atteint la limite supérieure de l'élément, vous pouvez modifier dynamiquement sa position sur fixe et réinitialiser sa propriété supérieure à 0.

L'extrait de code JavaScript suivant montre comment y parvenir à l'aide de la fonction scrollTop :

$(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'});
  }
});

Lorsque le décalage de défilement dépasse 200 pixels, l'élément sera fixé en haut de la fenêtre du navigateur.

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!