仅在 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 轴上的位置，同时仍允许垂直滚动。