Wie erstelle ich ein scrollendes Div, das am oberen Bildschirmrand haftet?

Erstellen eines scrollenden Divs, das am oberen Bildschirmrand haftet

Wenn Sie möchten, dass ein Element auch dann am oberen Bildschirmrand verankert bleibt Wenn die Seite scrollt, können Sie ein „klebriges“ Div erstellen. So geht's:

Mit reinem CSS:

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

Alternative Methode mit jQuery:

Mit jQuery ist das möglich den gleichen Effekt mit mehr Flexibilität erzielen. Positionieren Sie das Element wie folgt:

.fixedElement {
    position: absolute;
    top: 100px; // Replace with desired initial top offset
}

Dann ermitteln Sie den Scroll-Offset mit JavaScript:

$(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': 'absolute', 'top': '100px'}); // Adjust top offset as needed
  } 
});

Sobald der Scroll-Offset einen angegebenen Wert überschreitet (in diesem Beispiel 200 Pixel), wird der div wird am oberen Bildschirmrand fixiert. Wenn der Scroll-Versatz unter diesen Wert fällt, kehrt er in seine Ausgangsposition zurück.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein scrollendes Div, das am oberen Bildschirmrand haftet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!