Wie kann ich ein DIV-Element beim Scrollen fixieren?

So positionieren Sie ein DIV beim Scrollen fest

Diese Abfrage untersucht, wie Sie dafür sorgen können, dass ein Div nach dem Scrollen zu einem bestimmten Punkt auf dem fixiert bleibt Seite. Die Idee besteht darin, einen ähnlichen Effekt wie die zweite Anzeige auf Websites wie 9gag zu erzeugen, die fest erscheint, wenn Sie über einen bestimmten Punkt hinaus nach unten scrollen.

Während CSS allein derzeit keine Lösung bietet, ist eine Kombination aus CSS und JavaScript kann diesen Effekt erzielen.

Verwendung des jQuery-Ansatzes:

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

In diesem Code stellt fixme den DIV dar, der fest positioniert werden soll. Dieser Ansatz fügt einen Ereignis-Listener hinzu, der die Bildlaufposition verfolgt und sie mit der Anfangsposition des DIV vergleicht. Wenn die Bildlaufposition die Anfangsposition des DIV überschreitet, werden die CSS-Eigenschaften „position“, „top“ und „left“ festgelegt, um das DIV an Ort und Stelle zu fixieren. Andernfalls wird die Position der CSS-Eigenschaft auf „statisch“ gesetzt, damit das DIV normal scrollen kann.

Das obige ist der detaillierte Inhalt vonWie kann ich ein DIV-Element beim Scrollen fixieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!