如何用JavaScript实现滚动后悬停页面顶部显示菜单功能？

没问题，我帮你搞定这个需求！核心思路是先跟踪菜单是否滚出了浏览器视口，再通过页面顶部的一个透明触发区域，来控制菜单是否固定显示在顶部。下面是完整的实现方案：

完整代码实现 #

1. 调整后的CSS #

我们需要新增一个固定定位的样式类，同时添加一个透明的顶部触发区域样式，还要修正原菜单的基础样式：

.first { 
  display: flex; 
  background: red; 
  margin: 0;
  padding: 10px;
  list-style: none;
  position: relative;
  top: 0;
  width: 100%;
  box-sizing: border-box; /* 避免padding撑宽菜单 */
}
.second { 
  width: 200px; 
  height: 250px; 
}
.container { 
  display: flex; 
  flex-direction: column; 
}
/* 菜单固定在顶部的样式 */
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100; /* 确保菜单在最上层 */
}
/* 顶部透明触发区域，用来捕获鼠标悬停 */
.top-hover-trigger {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px; /* 可按需调整触发区域的高度 */
  z-index: 99; /* 低于菜单，不影响菜单显示 */
  opacity: 0; /* 完全透明，不干扰页面视觉 */
}

2. 修正后的HTML #

原HTML里直接用div包裹li是不规范的，我们改成标准的ul结构，同时添加顶部触发区域：

<div class="container">
  <!-- 顶部悬停触发区域（透明不可见） -->
  <div class="top-hover-trigger"></div>
  <!-- 修正为标准的菜单结构 -->
  <ul class="first">
    <li>fff</li>
    <li>fff</li>
    <li>ff</li>
    <li>fff</li>
  </ul>
  <div class="second">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione sit totam. Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit voluptatem? Dolor, doloribus? Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit voluptatem? Dolor, doloribus? Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit voluptatem? Dolor, doloribus? </div>
    <div>Ad cum cumque dolores odio quos sequi tenetur! Aliquid cupiditate facilis fugiat, impedit iste labore libero modi necessitatibus nulla rerum soluta, suscipit. Aliquid culpa, eveniet molestias provident reiciendis tempore velit! </div>
    <div>Cumque dolorum id natus. A alias aliquid culpa cum eaque earum harum, iusto natus nihil odit optio pariatur, repellat veritatis? Corporis expedita magni non numquam recusandae sed sunt suscipit velit? </div>
    <div>Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit voluptatem? Dolor, doloribus? Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit voluptatem? Dolor, doloribus? Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit voluptatem? Dolor, doloribus? </div>
  </div>
</div>

3. JavaScript逻辑实现 #

这段代码负责跟踪滚动状态和处理鼠标悬停事件：

// 获取关键元素
const menu = document.querySelector('.first');
const topTrigger = document.querySelector('.top-hover-trigger');
let isMenuScrolledOut = false;

// 监听页面滚动，判断菜单是否已滚出视口
window.addEventListener('scroll', () => {
  const menuTopPosition = menu.getBoundingClientRect().top;
  // 当菜单顶部超出视口顶部时，标记为已滚出
  isMenuScrolledOut = menuTopPosition < 0;
});

// 鼠标悬停顶部触发区域时，显示固定菜单
topTrigger.addEventListener('mouseenter', () => {
  if (isMenuScrolledOut) {
    menu.classList.add('fixed-top');
  }
});

// 鼠标离开顶部区域时，恢复菜单原位置
topTrigger.addEventListener('mouseleave', () => {
  menu.classList.remove('fixed-top');
});

功能说明 #

• 滚动跟踪：通过scroll事件实时判断菜单是否已经滚出浏览器视口，用isMenuScrolledOut变量记录状态。
• 悬停触发：页面顶部的透明区域会捕获鼠标悬停事件，只有当菜单已经滚出视口时，才会给菜单添加固定定位样式，让它显示在顶部。
• 恢复原位：鼠标离开顶部区域后，移除固定样式，菜单回到原来的滚动位置。
• 规范修正：把原HTML里不规范的div包裹li改成了标准的ul结构，避免HTML语法问题。

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