Wie kann ich die X-Achsenposition eines HTML-Elements korrigieren und gleichzeitig vertikales Scrollen zulassen?

Element nur auf der Ästhetik. Ein häufiges Szenario besteht darin, dass ein Element auf der X-Achse fixiert bleibt, aber mit dem Surferlebnis des Benutzers vertikal scrollt.

Frage:

Ist es möglich, das Problem zu beheben? Position eines HTML-Elements nur auf der x-Achse, sodass es vertikal mit dem Seiteninhalt scrollen kann, aber seine horizontale Ausrichtung beibehält Position?

Antwort:

Ja, dies ist durch eine Kombination aus CSS und JavaScript möglich. So können Sie es machen:

CSS:

Definieren Sie die Position des Elements als absolut und geben Sie seinen oberen Versatz an:

JavaScript:

#my-element {
    position: absolute;
    top: 15px;
}

Fügen Sie mit jQuery einen Ereignis-Listener zum Bildlauf des Fensters hinzu Ereignis. Passen Sie im Listener die linke Position des Elements basierend auf der aktuellen Scroll-Position an:

Im CSS positionieren wir das Element absolut mit einem oberen Versatz von 15 Pixeln, um sicherzustellen, dass es über dem oberen Rand der Seite bleibt . Der JavaScript-Code stellt sicher, dass der linke Versatz des Elements beim Scrollen des Benutzers gleich bleibt und verhindert, dass es sich horizontal bewegt.

$(window).scroll(function() {
    $('#my-element').css({
        'left': $(this).scrollLeft()
    });
});

Hinweis:

Um die linke Position des Elements beizubehalten Selbst wenn es sich im CSS ändert, können Sie diesen aktualisierten JavaScript-Code verwenden:

Dieser Ansatz übernimmt die anfängliche linke Position aus dem CSS und verwendet sie in Das Skript stellt sicher, dass sich alle nachfolgenden CSS-Änderungen im JavaScript-Verhalten widerspiegeln.

Das obige ist der detaillierte Inhalt vonWie kann ich die X-Achsenposition eines HTML-Elements korrigieren und gleichzeitig vertikales Scrollen zulassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!