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

Fixieren der Position auf der X-Achse nur in CSS: Eine umfassende Anleitung

Die Möglichkeit, die Position eines Elements auf der X-Achse zu fixieren Während das Zulassen vertikalen Scrollens eine häufige Anforderung im Webdesign ist. In diesem Artikel wird eine Technik untersucht, die CSS und JavaScript verwendet, um diesen Effekt zu erzielen.

CSS-Implementierung

Um die Position auf der X-Achse nur mit CSS zu fixieren, verwenden Sie die absolute Positionierungseigenschaft unter Angabe der linken Position und einer festen oberen Position:

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

Dadurch wird das Element 15 Pixel von oben und 15 Pixel von oben positioniert links und bleibt an dieser Position, wenn der Benutzer vertikal scrollt.

JavaScript-Implementierung mit JQuery

Um den Effekt weiter zu verstärken, kann JavaScript zum Beibehalten verwendet werden die linke Position ist an der scrollenden Seite ausgerichtet:

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15
    });
});

In diesem Code gibt die Funktion scrollLeft() die horizontale Scrollposition des Fensters zurück. Durch Addition von 15 zu diesem Wert wird sichergestellt, dass das Element auch dann 15 Pixel von der linken Seite entfernt bleibt, wenn der Benutzer horizontal scrollt.

Dynamische Skriptanpassung

Das Originalskript erfordert die linke Position in CSS auf 15px eingestellt werden. Um es flexibler zu gestalten, können Sie Folgendes verwenden:

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first
$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});

Dieses Skript passt sich automatisch an die linke CSS-Position an.

Fazit

Mit CSS und JavaScript ist es möglich, eine Position nur auf der X-Achse festzulegen, sodass ein Element vertikal scrollen kann, während es horizontal fixiert bleibt. Diese Technik bietet Flexibilität und Kontrolle über die Elementpositionierung und verbessert so das Benutzererlebnis und die Vielseitigkeit des Designs.

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