Comment puis-je créer une division flottante qui reste fixe lors du défilement ?

Div flottant sur défilement : un guide complet

Vous avez déjà rencontré le besoin d'un div qui reste fixe en haut de l'écran après le défilement au-delà de sa position initiale ? Ce scénario de développement Web courant peut être réalisé facilement et cet article vous fournira une feuille de route détaillée.

Pour commencer, considérez la solution CSS. En définissant la position du div comme fixe, vous pouvez vous assurer qu'il reste en place :

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

Cependant, pour une approche plus dynamique, pensez à utiliser jQuery. Positionnez le div de manière absolue au départ, et une fois atteint la position de défilement souhaitée, passez à une position fixe avec un décalage supérieur nul :

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

Avec la fonction scrollTop, détectez quand le décalage de défilement atteint le point spécifié (par ex. , 200 pixels). À ce seuil, changez la position de l'élément en conséquence, en vous assurant qu'il « colle » en haut de l'écran lors du défilement.

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!