探索固定定位与粘性定位的巧妙替代方案，打造始终置顶的悬浮菜单栏

2024-01-16 20:05:10

绝对定位与粘性定位的限制

绝对定位和粘性定位都是非常有用的 CSS 定位属性，但在某些情况下，这两个属性可能会产生冲突，无法同时使用。例如，当父容器本身具有滚动条时，绝对定位的元素可能会随着父容器的滚动而移动，而粘性定位的元素则会保持固定位置。这会导致元素在页面上的位置发生变化，破坏页面的布局。

巧妙的替代方案：组合使用固定定位和 transform 属性

为了解决这个问题，我们可以巧妙地结合固定定位 (position: fixed) 和 transform 属性来创建始终置顶的悬浮菜单栏。具体步骤如下：

将菜单栏元素设置为 fixed 定位，使其在页面上始终保持固定位置。
使用 transform 属性将菜单栏元素向右上方移动一定距离，使其位于所需的起始位置。
当父容器滚动时，使用 JavaScript 监听父容器的滚动事件，并相应地调整菜单栏元素的 transform 属性，使菜单栏元素始终保持在页面顶部的指定位置。

实现示例

<div id="parent-container">
  <div id="menu-bar">
    ...
  </div>
</div>

#menu-bar {
  position: fixed;
  top: 0;
  right: 0;
  transform: translate(-50%, -50%);
}

#parent-container {
  overflow-y: scroll;
  height: 500px;
}

const parentContainer = document.getElementById('parent-container');
const menuBar = document.getElementById('menu-bar');

parentContainer.addEventListener('scroll', () => {
  const scrollTop = parentContainer.scrollTop;
  menuBar.style.transform = `translate(-50%, -50%) translateY(${scrollTop}px)`;
});