Comment fixer un élément DIV lors du défilement ?

Comment positionner un DIV fixe lors du défilement

Cette requête explore comment faire en sorte qu'un div reste fixe après avoir fait défiler jusqu'à un point spécifique du page. L'idée est de créer un effet similaire à la deuxième publicité sur des sites Web comme 9gag, qui apparaît fixe lorsque vous faites défiler vers le bas au-delà d'un certain point.

Bien que CSS à lui seul ne fournisse pas actuellement de solution, une combinaison de CSS et JavaScript peut obtenir cet effet.

En utilisant l'approche jQuery :

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
  var currentScroll = $(window).scrollTop();
  if (currentScroll >= fixmeTop) {
    $('.fixme').css({
      position: 'fixed',
      top: '0',
      left: '0'
    });
  } else {
    $('.fixme').css({
      position: 'static'
    });
  }
});

Dans ce code, fixme représente le DIV à positionner fixe. Cette approche ajoute un écouteur d'événements qui suit la position de défilement et la compare à la position initiale du DIV. Lorsque la position de défilement dépasse la position initiale du DIV, les propriétés CSS position, top et left sont définies pour fixer le DIV en place. Sinon, la position de la propriété CSS est définie sur statique pour permettre au DIV de défiler normalement.

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!