Wie halte ich ein Div beim Scrollen am oberen Bildschirmrand?

So fixieren Sie ein Div beim Scrollen am oberen Bildschirmrand

Wenn Sie durch eine Website scrollen, möchten Sie möglicherweise bestimmte Elemente beibehalten stationär am oberen Bildschirmrand. Um dies zu erreichen, können CSS-Eigenschaften wie Position und Top manipuliert werden.

CSS-Lösung:

Sie können CSS verwenden, um ein Element am oberen Bildschirmrand zu fixieren Verwenden der festen Positionierung:

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

JavaScript-Lösung:

Für mehr Kontrolle über Um das Verhalten des Elements zu ermitteln, können Sie JavaScript und die scrollTop-Funktion verwenden, um den Scroll-Offset der Seite zu ermitteln. Hier ist ein Beispiel:

$(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 &amp;&amp; isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

Wenn in diesem Code der Bildlaufversatz 200 Pixel überschreitet, wird die Position des Elements in „Fest“ geändert, und wenn der Versatz unter 200 Pixel fällt, kehrt das Element zu seiner ursprünglichen Position zurück und ist nicht mehr oben fixiert.

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