Wie kann man beim Scrollen ein Div am oberen Bildschirmrand fixieren?

Ein Div beim Scrollen am oberen Bildschirmrand fixieren

Das Positionieren von Elementen auf einer Webseite kann die Benutzererfahrung und Organisation verbessern. Ein häufiges Szenario besteht darin, ein Div am oberen Bildschirmrand zu fixieren, wenn es einen bestimmten Bildlaufpunkt erreicht.

Um dies zu erreichen, gibt es mehrere Ansätze, von denen einer die ausschließliche Verwendung von CSS beinhaltet. Wenn Sie die Position des Elements auf „Fest“ festlegen, bleibt es am oberen Bildschirmrand verankert, nachdem es zu folgender Position gescrollt wurde:

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

Bei diesem Ansatz wird jedoch davon ausgegangen, dass das Element zunächst absolut positioniert ist. Wenn der gewünschte Scroll-Offset erreicht ist, sollte seine Position in „Fixed“ geändert werden und die Top-Eigenschaft sollte auf Null zurückgesetzt werden. Um den Scroll-Offset zu bestimmen, kann JavaScript verwendet werden, um die scrollTop-Funktion des Dokuments zu überwachen:

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

Wenn in diesem Skript der Scroll-Offset 200 Pixel erreicht, wechselt das Element zu einer festen Position oben des Bildschirms. Wenn der Versatz unter 200 Pixel fällt, kehrt das Element zu seiner vorherigen Position zurück. Diese Technik ermöglicht einen reibungslosen Übergang des Div, während der Benutzer auf der Seite scrollt.

Das obige ist der detaillierte Inhalt vonWie kann man beim Scrollen ein Div am oberen Bildschirmrand fixieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!