Fixieren der Position auf der X-Achse nur in CSS

Beim Entwerfen von Weblayouts ist es oft wünschenswert, Elemente dabei auf einer bestimmten Achse zu fixieren Das Scrollen in andere Richtungen ist weiterhin möglich. Ein häufiges Szenario besteht darin, ein Element auf der x-Achse zu fixieren, sodass es horizontal an Ort und Stelle bleibt, während der Benutzer vertikal scrollt.

Ist das möglich?

Ja, Es ist nur mit CSS möglich, eine Position auf der x-Achse festzulegen.

So erreichen Sie das Es

Um dies zu erreichen, folgen Sie diesen Schritten:

1. Setzen Sie die Position des Elements auf „absolut“: Dadurch wird das Element aus dem normalen Fluss entfernt des Dokuments und ermöglicht eine präzise Positionierung.
2. Eigenschaft 'left' verwenden: Geben Sie den linken Rand des Elements an relativ zum nächstgelegenen positionierten Vorfahren.
3. Verwenden Sie jQuery: Nutzen Sie jQuery, um auf Scroll-Ereignisse zu reagieren und die Position des Elements entsprechend anzupassen.

jQuery und CSS-Beispiel:

$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   15 // Adjust based on CSS 'left'
    });
});

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

Erweitertes Skript:

Um dynamische CSS-Änderungen zu unterstützen, können Sie dieses aktualisierte Skript verwenden:

var leftOffset = parseInt($('#header').css('left')); // Grab initial left position
$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   leftOffset // Use initial offset
    });
});

Indem Sie diese Schritte befolgen, können Sie die Position eines Elements auf der X-Achse effektiv fixieren und gleichzeitig vertikales Scrollen ermöglichen.