嘿，我懂你想做的交互——通过跟踪鼠标位置来触发导航栏的显示/隐藏，其实这个需求挺常见的，clientX的用法也没那么复杂，我来一步步拆解实现思路和代码示例：

核心实现思路 #

• 监听鼠标移动事件：给document绑定mousemove事件，实时获取鼠标的位置信息；
• 利用clientX判断位置：event.clientX就是鼠标相对于浏览器视口左边缘的水平像素距离，刚好对应你需要的阈值判断；
• 状态锁避免重复触发：加一个变量记录导航栏当前的状态（打开/关闭），防止鼠标在阈值边缘反复移动时，重复调用openNav或closeNav；
• 边界处理：考虑鼠标移出视口的情况（比如鼠标移到浏览器外面），此时可以默认关闭导航栏。

完整示例代码 #

HTML结构 #

<!-- 导航栏元素 -->
<div id="sidebarNav" class="nav-hidden">
  <!-- 导航内容 -->
  <ul>
    <li>首页</li>
    <li>分类</li>
    <li>关于我们</li>
  </ul>
</div>

CSS样式 #

/* 默认隐藏导航栏 */
.nav-hidden {
  position: fixed;
  left: -200px; /* 导航栏宽度设为200px，默认移出视口 */
  top: 0;
  width: 200px;
  height: 100vh;
  background: #333;
  color: white;
  transition: left 0.3s ease;
}

/* 导航栏显示状态 */
.nav-open {
  left: 0;
}

JavaScript逻辑 #

// 导航栏元素和状态变量
const sidebarNav = document.getElementById('sidebarNav');
let isNavOpen = false;

// 监听鼠标移动事件
document.addEventListener('mousemove', (event) => {
  const mouseX = event.clientX;
  const threshold = 250; // 左边缘阈值

  // 鼠标进入阈值范围，且导航未打开
  if (mouseX <= threshold && !isNavOpen) {
    openNav();
  } 
  // 鼠标离开阈值范围，且导航已打开
  else if (mouseX > threshold && isNavOpen) {
    closeNav();
  }
});

// 监听鼠标移出视口事件，防止鼠标在外面时导航一直打开
document.addEventListener('mouseleave', () => {
  if (isNavOpen) {
    closeNav();
  }
});

// 打开导航的函数
function openNav() {
  sidebarNav.classList.remove('nav-hidden');
  sidebarNav.classList.add('nav-open');
  isNavOpen = true;
}

// 关闭导航的函数
function closeNav() {
  sidebarNav.classList.remove('nav-open');
  sidebarNav.classList.add('nav-hidden');
  isNavOpen = false;
}

代码说明 #

1. clientX的作用：event.clientX直接获取鼠标到视口左边缘的距离，不需要额外计算，完全匹配你的需求；
2. 状态变量isNavOpen：确保只有状态变化时才执行打开/关闭函数，避免频繁DOM操作；
3. mouseleave事件：处理鼠标移出浏览器窗口的情况，提升交互体验；
4. CSS过渡动画：让导航栏的显示/隐藏更平滑，避免突兀的变化。

如果你的openNav和closeNav已经有自己的实现，只需要把示例中的对应函数替换成你自己的即可～

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