Wie kann ein Div beim Scrollen am oberen Bildschirmrand fixiert bleiben?

Position eines Div am oberen Bildschirmrand beim Scrollen festlegen

Um ein Div zu erstellen, das einmal am oberen Bildschirmrand haftet Wenn Sie dorthin scrollen, können Sie die Positionseigenschaft von CSS verwenden. Betrachten Sie das folgende CSS-Snippet:

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

Bearbeiten:

Um sicherzustellen, dass das Element richtig haftet, sollte seine Position zunächst auf „absolut“ eingestellt sein. Sobald der Scroll-Offset des Dokuments die obere Grenze des Elements erreicht, können Sie seine Position dynamisch in „Fest“ ändern und seine Top-Eigenschaft auf 0 zurücksetzen.

Das folgende JavaScript-Code-Snippet zeigt, wie dies mit der scrollTop-Funktion erreicht wird:

$(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 der Scroll-Offset 200 Pixel überschreitet, wird das Element oben im Browserfenster fixiert.

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