粘性固定菜单进度条无法准确定位至菜单项下方求助

看起来你遇到的核心问题是进度条的定位逻辑不对，导致它没法精准对齐到菜单项的正下方。咱们一步步来修复这个问题：

问题根源分析 #

1. 你给#menu_progress用了float: left和position: sticky，这两个属性组合会让进度条的定位脱离导航栏的上下文，没法固定在菜单项底部。
2. 宽度计算用了$(this).offset().left + $(this).width()，这个值是相对于整个文档的绝对位置，不是相对于导航栏的，所以进度条会从页面左侧开始延伸，而不是从菜单项的左侧开始。

修复方案 #

1. 调整CSS定位逻辑 #

首先给导航栏添加相对定位，让进度条可以相对于它定位；然后把进度条改成绝对定位，固定在导航栏底部：

.nav { 
  position: sticky; 
  top: 0; 
  overflow: hidden; 
  background-color: white; 
  position: -webkit-sticky; /* Safari */ 
  position: -moz-sticky; /* firefox */ 
  z-index: 5;
  position: relative; /* 新增：让内部绝对定位元素以它为参照 */
}
.nav a { 
  float: left; 
  display: block; 
  color: black; 
  text-align: center; 
  padding: 14px 24px; 
  text-decoration: none; 
  font-size: 17px;
}
.nav a:hover { color: #42AC82; }
.nav .icon { display: none; }
#menu_progress { 
  height: 3px; 
  width: 0; 
  background: #42AC82; 
  position: absolute; /* 改为绝对定位 */
  left: 0;
  bottom: 0; /* 固定在导航栏底部，正好在菜单项下方 */
  z-index: 6; /* 确保进度条在导航文字上方 */
  transition: all 0.3s ease; /* 用CSS过渡实现平滑动画，比JS animate更流畅 */
}

2. 修改JS的位置与宽度计算逻辑 #

现在需要计算菜单项相对于导航栏的左侧偏移和实际宽度，而不是相对于文档的位置：

// menu progress bar
$('.nav a').mouseover(function() {
  // 获取当前菜单项相对于父元素.nav的左侧偏移
  const itemLeft = $(this).position().left;
  // 获取菜单项的实际宽度（包含padding）
  const itemWidth = $(this).outerWidth();
  
  // 同时设置进度条的左侧位置和宽度
  $('#menu_progress').css({
    left: itemLeft,
    width: itemWidth
  });
});

// 可选优化：鼠标离开导航栏时重置进度条
$('.nav').mouseleave(function() {
  $('#menu_progress').css({
    left: 0,
    width: 0
  });
});

3. HTML结构保持不变 #

你的HTML结构没问题，#menu_progress放在.nav内部就可以了：

<div class="nav" id="myNav">
  <a href="#call-data">Call Data</a>
  <a href="#source">Source</a>
  <a href="#lead">Lead</a>
  <a href="#address">Address</a>
  <a href="#motivation">Motivation</a>
  <a href="#property">Property</a>
  <a href="#visit">Visit</a>
  <a href="#finish">Finish</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
  <div id="menu_progress"></div>
</div>

为什么这样改？ #

• position: relative给.nav之后，内部的绝对定位元素会以导航栏为基准，bottom:0直接把进度条钉在导航栏底部，完美对齐菜单项的下方。
• $(this).position().left获取的是菜单项相对于导航栏的左侧距离，而不是整个页面，这样进度条的起始位置完全匹配菜单项的左侧。
• outerWidth()包含了菜单项的padding，确保进度条的宽度和菜单项完全一致，不会出现宽度偏差。
• CSS过渡比JS的animate更平滑，也减少了JS的性能开销。

你可以在大屏幕环境下测试这个修改后的代码，进度条应该能精准地定位在每个悬停菜单项的正下方了。

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