如何在 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中文网其他相关文章！