Comment faire en sorte qu'un Div colle en haut de l'écran lors du défilement ?

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

Lorsque vous faites défiler un site Web, vous souhaiterez peut-être conserver certains éléments stationnaire en haut de l’écran. Pour y parvenir, les propriétés CSS telles que position et top peuvent être manipulées.

Solution CSS :

Vous pouvez utiliser CSS pour fixer un élément en haut de l'écran en utilisant le positionnement fixe :

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

Solution JavaScript :

Pour plus de contrôle sur le comportement de l'élément, vous pouvez utiliser JavaScript et la fonction scrollTop pour détecter le décalage de défilement de la page. Voici un exemple :

$(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 &amp;&amp; isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

Dans ce code, lorsque le décalage de défilement dépasse 200 pixels, la position de l'élément devient fixe, et lorsque le décalage descend en dessous de 200 pixels, l'élément revient à sa position d'origine et n'est plus fixé au sommet.

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!