Wie befestige ich beim Scrollen mit CSS ein Div am oberen Rand des Ansichtsfensters?

Ein Div beim Scrollen mit CSS reparieren

Ihre Frage bezieht sich darauf, dass ein Div nach dem Scrollen fixiert bleibt. Wie Sie bereits erwähnt haben, führt die einfache Anwendung von position: Fixed auf das Div dazu, dass es angezeigt wird, bevor es auf der Seite erscheinen sollte.

Glücklicherweise ermöglichen Fortschritte in CSS jetzt diese Funktionalität:

div {
  position: sticky;
  top: 0;
}

Die Die Sticky-Position-Eigenschaft stellt sicher, dass das Div fixiert bleibt, sobald es den oberen Rand des Ansichtsfensters erreicht, ähnlich wie sich die zweite Anzeige auf 9gag verhält.

jQuery-Alternative

Aus Kompatibilitätsgründen Bei älteren Browsern ist hier der ursprüngliche jQuery-Ansatz:

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

Das obige ist der detaillierte Inhalt vonWie befestige ich beim Scrollen mit CSS ein Div am oberen Rand des Ansichtsfensters?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!