如何实现滚动时菜单旋转归正并固定顶部？（Elementor Pro/JS/CSS/HTML）

方案一：Elementor Pro 实现 #

Elementor Pro 可以通过自带的粘性功能+自定义CSS+少量JS实现需求：

• 给菜单容器添加初始样式：在Elementor的「自定义CSS」里设置初始旋转角度和过渡效果：

  .your-menu-class {
    transform: rotate(6deg);
    transition: transform 0.3s ease;
  }
  

• 开启粘性定位：在Elementor编辑器中选中菜单，找到「高级」>「粘性」，设置触发条件为「滚动到顶部」，此时菜单滚动到顶部后会自动添加Elementor的粘性激活类（通常是.elementor-sticky--active）。
• 添加固定后的样式：在自定义CSS中补充粘性激活时的旋转覆盖：

  .elementor-sticky--active .your-menu-class {
    transform: rotate(0deg);
  }
  

• 停止原有滚动旋转逻辑：如果之前有自定义JS实现滚动旋转，只需在JS中监听.elementor-sticky--active类的添加状态，当类存在时跳过旋转逻辑：

  const menu = document.querySelector('.your-menu-class');
  window.addEventListener('scroll', () => {
    if (menu.classList.contains('elementor-sticky--active')) return;
    // 原有滚动旋转逻辑
  });
  

方案二：原生 JS/CSS/HTML 实现 #

如果不用Elementor，直接用原生代码可以更灵活控制：

HTML 结构 #

<nav class="rotating-menu">
  <!-- 菜单内容，比如导航链接 -->
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</nav>

CSS 样式 #

.rotating-menu {
  position: relative;
  width: 100%;
  padding: 1rem;
  background: #fff;
  transform: rotate(6deg);
  transition: transform 0.3s ease, position 0.3s ease;
  /* 其他自定义样式 */
}

.rotating-menu.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  transform: rotate(0deg);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 可选：添加阴影增强固定效果 */
}

JS 逻辑 #

const menu = document.querySelector('.rotating-menu');
let isFixed = false;

// 原有滚动旋转逻辑（示例）
function updateRotationOnScroll() {
  if (isFixed) return; // 已固定则停止执行旋转逻辑
  const scrollDistance = window.scrollY;
  // 这里是你之前的旋转计算逻辑，比如随滚动逐渐减小角度
  const currentRotation = Math.max(0, 6 - (scrollDistance / 150));
  menu.style.transform = `rotate(${currentRotation}deg)`;
}

// 监听滚动，处理固定状态和旋转停止
window.addEventListener('scroll', () => {
  const menuPosition = menu.getBoundingClientRect();
  
  // 菜单顶部接触视口顶部时固定
  if (menuPosition.top <= 0 && !isFixed) {
    menu.classList.add('fixed-top');
    isFixed = true;
  }
  // 滚动回菜单原位置时取消固定
  else if (menuPosition.top > 0 && isFixed) {
    menu.classList.remove('fixed-top');
    isFixed = false;
  }
  
  // 仅在未固定时执行旋转更新
  updateRotationOnScroll();
});

// 初始绑定滚动事件
window.addEventListener('scroll', updateRotationOnScroll);

逻辑说明 #

• CSS 中通过过渡动画保证旋转和固定状态切换的平滑性；
• JS 中通过getBoundingClientRect()判断菜单是否到达视口顶部，切换固定类；
• 用isFixed标记控制原有滚动旋转逻辑的执行，固定后直接跳过旋转计算。

内容的提问来源于stack exchange，提问作者The DST