Wie kann ich ein schwebendes Div erstellen, das beim Scrollen fixiert bleibt?

Floating Div on Scroll: Eine umfassende Anleitung

Haben Sie jemals den Bedarf an einem Div festgestellt, das nach dem Scrollen am oberen Bildschirmrand fixiert bleibt? über seine Ausgangsposition hinaus? Dieses gängige Webentwicklungsszenario lässt sich problemlos umsetzen, und dieser Artikel bietet Ihnen eine detaillierte Roadmap.

Betrachten Sie zunächst die CSS-Lösung. Indem Sie die Position des Divs als fest festlegen, können Sie sicherstellen, dass es an Ort und Stelle bleibt:

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

Für einen dynamischeren Ansatz sollten Sie jedoch die Verwendung von jQuery in Betracht ziehen. Positionieren Sie das Div zunächst absolut und wechseln Sie bei Erreichen der gewünschten Scroll-Position zu einer festen Position mit einem oberen Versatz von Null:

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

Erkennen Sie mit der scrollTop-Funktion, wann der Scroll-Versatz den angegebenen Punkt erreicht (z. B. , 200 Pixel). Ändern Sie bei diesem Schwellenwert die Position des Elements entsprechend und stellen Sie sicher, dass es beim Scrollen am oberen Bildschirmrand „klebt“.

Das obige ist der detaillierte Inhalt vonWie kann ich ein schwebendes Div erstellen, das beim Scrollen fixiert bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!