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