如何在 CSS 中允許垂直滾動的同時修復元素的 X 軸位置？

僅在CSS 中固定X 軸位置：綜合指南

修復元素在X 軸上的位置的能力而允許垂直滾動是網頁設計中的常見要求。本文將探討使用 CSS 和 JavaScript 來實現此效果的技術。

CSS 實現

要僅使用CSS 固定X 軸上的位置，請使用絕對定位屬性，同時指定左側位置和固定頂部位置：

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

這會將元素定位在距頂部15 像素和距頂部15像素的位置左側像素，並且當使用者垂直滾動時它將保持在該位置。

使用JQuery 的JavaScript 實現

為了進一步增強效果，可以使用JavaScript保持左側位置與滾動頁面對齊：

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

在在此程式碼中，scrollLeft() 函數傳回頁面的水平滾動位置視窗。將此值加 15 可確保即使使用者水平捲動，元素仍距左側 15 個像素。

動態腳本調整

原始腳本需要左側位置在 CSS 中設定為 15px。為了使其更靈活，您可以使用以下內容：

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

此腳本會根據CSS左側位置自動調整。

結論

使用 CSS 和 JavaScript，可以只固定 X 軸上的位置，從而允許元素垂直滾動，同時保持水平固定。該技術提供了對元素定位的靈活性和控制，增強了使用者體驗和設計多功能性。

以上是如何在 CSS 中允許垂直滾動的同時修復元素的 X 軸位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！