我可以只使用 CSS 來修復元素在 X 軸上的位置嗎？-css教學-PHP中文網

我可以只使用 CSS 來修復元素在 X 軸上的位置嗎？

Linda Hamilton

發布： 2024-11-26 10:51:09

原創

405 人瀏覽過

Can I Fix an Element's Position on the X-Axis Only Using CSS?

僅在CSS 中固定X 軸位置

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

可能嗎？

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

如何實現它

要實現此目的，請按照以下步驟操作：

將元素的位置設為「絕對」：這會將元素從正常流中刪除文件的位置，並允許您精確定位它。
使用「左」 property：指定元素相對於最近定位祖先的左邊緣。
使用 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;
}

登入後複製

進階腳本：

進階腳本：

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

登入後複製

要支援CSS 更改，您可以使用此更新的腳本：透過執行以下步驟，您可以有效地固定元素在 x 軸上的位置，同時仍允許垂直滾動。

以上是我可以只使用 CSS 來修復元素在 X 軸上的位置嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！