如何在 CSS 和 JavaScript 中将元素固定到 X 轴？

仅将元素固定在 X 轴上

在 CSS 中，position 属性允许您控制元素在 X 轴上的位置页面。默认情况下，元素定位为“静态”，这意味着它们根据页面的流程放置。但是，您可以使用其他值来更精确地定位元素。

要仅将元素固定在 x 轴上，您可以使用固定位置。这将锁定元素相对于视口的位置，因此即使页面滚动，它也不会水平移动。

#element {
  position: fixed;
  top: 0;
  bottom: 0;
}

但是，在单个轴上使用固定定位可能会导致元素与其他内容重叠垂直滚动时的页面。为了防止这种情况，您可以使用 JavaScript 在页面滚动时动态调整元素在 y 轴上的位置。

JavaScript 解决方案

使用 jQuery，您可以将滚动事件监听器附加到窗口并相应地更新元素的顶部位置。

$(window).scroll(function() {
  $('#element').css('top', $(this).scrollTop());
});

这将确保元素垂直滚动时保持固定在 x 轴上。

CSS 解决方案

纯粹使用 CSS 实现此行为的另一种方法是使用 Transform: Translate()。此转换函数可以应用于元素以垂直移动它，而不影响其在 x 轴上的位置。

#element {
  position: fixed;
  left: 15px;
  transform: translate(0, -$(window).scrollTop());
}

此方法还可以防止元素在滚动时与其他内容重叠。

更新的解决方案

按照@PierredeLESPINAY的建议，使脚本支持CSS中的更改，而无需必须重新编码它们，您可以使用 parseInt($("#element").css('left')) 获取元素的初始左侧位置，并将其在脚本中用作偏移量。

以上是如何在 CSS 和 JavaScript 中将元素固定到 X 轴？的详细内容。更多信息请关注PHP中文网其他相关文章！