Comment réparer un div en haut de la fenêtre lors du défilement avec CSS ?

Correction d'un div lors du défilement avec CSS

Votre question concerne le fait qu'un div reste fixe après y avoir fait défiler. Comme vous l'avez mentionné, le simple fait d'appliquer position:fixed au div le fait apparaître avant qu'il ne le devrait sur la page.

Heureusement, les progrès du CSS permettent désormais cette fonctionnalité :

div {
  position: sticky;
  top: 0;
}

Le La propriété Sticky Position garantit que le div reste fixe une fois qu'il atteint le haut de la fenêtre, de la même manière que la deuxième annonce sur 9gag. se comporte.

Alternative jQuery

Pour la compatibilité avec les anciens navigateurs, voici l'approche jQuery originale :

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
  var divOffset = $('.fixme').offset().top;

  if (scrollTop >= divOffset) {
    $('.fixme').css({
      position: 'fixed',
      top: '0',
      left: '0'
    });
  } else {
    $('.fixme').css({
      position: 'static'
    });
  }
});

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!