僅在CSS 中固定X 軸位置

設計網頁佈局時，通常希望將元素固定在特定軸上，而仍然允許在其他方向滾動。常見的情況是在 x 軸上固定一個元素，以便在使用者垂直滾動時它保持在水平位置。

這可能嗎？

是的，只使用CSS就可以固定x軸上的位置。

如何實現

實現為此，請按照下列步驟操作：

1. 將元素的位置設為「絕對”：這會將元素從文件的正常流程中刪除，並允許您精確定位它。
2. 使用'left'屬性：指定元素相對於最近定位的左邊緣祖先.
3. 使用jQuery：利用jQuery 響應滾動事件並對應調整元素的位置。

jQuery 和 CSS 範例：

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

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

高級腳本：

要支援動態CSS 更改，您可以使用此更新的腳本：

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

透過執行以下步驟，您可以有效地固定元素在 x 軸上的位置，同時仍允許垂直捲動。