jquery - 当用户在此部分处于事件状态时，菜单下划线

Question

我制作了一个固定且粘性的菜单。当用户在特定部分时，菜单下划线看起来像进度条。进度条有效，但我不能将它准确地放在菜单下。例如，当我将鼠标悬停在第一部分(调用数据)上时，进度条加载，当我将鼠标悬停在第二部分(源)上时，进度条继续。它可以工作，但需要以正确的方式放置它

有人可以帮我改正吗？菜单进度条将位于部分下方。

Here is my code on fiddle, kindly test with bigger screen !

我确实尝试在网上查找但无法获得任何信息

.nav {
  position: sticky;
  top: 0;
  overflow: hidden;
  background-color: white;
  position: -webkit-sticky;
  /* Safari */
  position: -moz-sticky;
  /* firefox */
  z-index: 5;
}

.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%;
  float: left;
  background: #42AC82;
  position: sticky;
  top: 0;
  overflow: hidden;
  position: -webkit-sticky;
  /* Safari */
  position: -moz-sticky;
  /* firefox */
  z-index: 5;
}

<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>

 //menu progress bar
$('.nav a').mouseover(function() {
var x = $(this).offset().left + $(this).width();
$('#menu_progress').animate({ width: x });
});

Answer 1

这是您想要实现的目标吗？我做了以下改动，请大屏查看。谢谢

1. 已更改 $(this).offset()至 $(this).position().left取相对于父级而不是页面的偏移宽度。

2. 已更改 $(this).width()至 $(this).outerWidth()所以它需要容器的宽度，包括填充。

3. 已移动 <div id="menu_progress">外面<div class="nav" id="myNav"> .

//menu progress bar
$(".nav a").mouseover(function() {
  var x = $(this).position().left + $(this).outerWidth();
  $("#menu_progress").animate({
    width: x
  });
});

.nav {
  position: sticky;
  top: 0;
  overflow: hidden;
  background-color: white;
  position: -webkit-sticky;
  /* Safari */
  position: -moz-sticky;
  /* firefox */
  z-index: 5;
}

.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%;
  float: left;
  background: #42AC82;
  position: sticky;
  top: 0;
  overflow: hidden;
  position: -webkit-sticky;
  /* Safari */
  position: -moz-sticky;
  /* firefox */
  z-index: 5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<div id="menu_progress"></div>