Wie kann ich ein Element nur in CSS und JavaScript an der X-Achse fixieren?

Positionierung eines Elements nur auf der X-Achse fixiert

In CSS können Sie mit der Positionseigenschaft die Positionierung eines Elements steuern die Seite. Standardmäßig werden Elemente „statisch“ positioniert, d. h. sie werden entsprechend dem Seitenfluss platziert. Sie können jedoch andere Werte verwenden, um Elemente genauer zu positionieren.

Um ein Element nur auf der x-Achse zu fixieren, können Sie die feste Position verwenden. Dadurch wird die Position des Elements relativ zum Ansichtsfenster gesperrt, sodass es sich auch beim Scrollen der Seite nicht horizontal bewegt.

#element {
  position: fixed;
  top: 0;
  bottom: 0;
}

Die Verwendung einer festen Positionierung auf einer einzelnen Achse kann jedoch dazu führen, dass das Element andere Inhalte überlappt die Seite, wenn sie vertikal scrollt. Um dies zu verhindern, können Sie JavaScript verwenden, um die Position des Elements auf der Y-Achse beim Scrollen der Seite dynamisch anzupassen.

JavaScript-Lösung

Mit jQuery ist das möglich Hängen Sie einen Scroll-Ereignis-Listener an das Fenster an und aktualisieren Sie die obere Position des Elements entsprechend.

$(window).scroll(function() {
  $('#element').css('top', $(this).scrollTop());
});

Dadurch wird sichergestellt, dass das Element fixiert bleibt auf der x-Achse beim vertikalen Scrollen.

CSS-Lösung

Eine andere Methode, dieses Verhalten rein mit CSS zu erreichen, ist die Verwendung von transform: Translate(). Diese Transformationsfunktion kann auf ein Element angewendet werden, um es vertikal zu verschieben, ohne seine Position auf der x-Achse zu beeinflussen.

#element {
  position: fixed;
  left: 15px;
  transform: translate(0, -$(window).scrollTop());
}

Dieser Ansatz verhindert auch, dass das Element beim Scrollen andere Inhalte überlappt.

Aktualisierte Lösung

Wie von @PierredeLESPINAY vorgeschlagen, damit das Skript Änderungen im CSS unterstützt, ohne dass dies erforderlich ist Um sie neu zu kodieren, können Sie die anfängliche linke Position des Elements mit parseInt($("#element").css('left')) erfassen und im Skript als Offset verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Element nur in CSS und JavaScript an der X-Achse fixieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!