时间戳

首页 > 解决方案 > 当用户在此部分活动时，菜单下划线

jquery - 当用户在此部分活动时，菜单下划线

问题描述

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

有人可以帮我纠正这个吗？菜单进度条将在部分下方。

这是我在小提琴上的代码，请用更大的屏幕进行测试！

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

.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 });
});

标签： jqueryhtmlcssfrontend

解决方案

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

  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>

推荐阅读