我正在尝试开发一个在滚动窗口时突出显示的菜单。当滚动到该部分时，相应的菜单项将带有下划线。我真的发现很难获得相同的东西并且为此非常挣扎。作为设计新手，我无法实现。请分享一些对此的见解，将非常有帮助。以下是我要处理的菜单项。
<ul class="nav navbar-nav" id="mainNav">
<li class="active"><a data-scroll href="#wmc" class='hidden-xs hidden-sm' >Home</a></li>
<li><a data-scroll href="#agenda" class='hidden-xs hidden-sm'>Agenda</a></li>
<li><a data-scroll href="#wmcpartners" class='hidden-xs hidden-sm'>Partners</a></li>
<li><a data-scroll href="https://www.aafmindia.co.in/EventRegistration.aspx" class='hidden-xs hidden-sm'>Register</a></li>
<li><a data-scroll href="#contact" class='hidden-xs hidden-sm'>Contact Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle bottompad0 dropbtn hidden-xs hidden-sm" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Past Events
<span class="caret"></span>
</a>
<ul class="dropdown-content">
<li><a href="gallery2018.html">2018</a></li>
<li><a href="gallery2017.html">2017</a></li>
<li><a href="gallery2016.html">2016</a></li>
<li><a href="gallery2015.html">2015</a></li>
<li><a href="gallery2014.html">2014</a></li>
<li><a href="gallery2013.html">2013</a></li>
</ul>
h</li></ul>
最佳答案
这是我为您编写的解决方案...使用它..它有效..您需要进行一些调整但它有效..我希望我帮助了:)
$(window).scroll(function () { //on scroll event on window
var position = $(this).scrollTop(); //position scrolled sofar
$('.section').each(function() { //for each loop(chcecks for every element with that class)
//for your every section on site or your class of main sections you are targetting
var target = $(this).offset().top;//each element position from top
var targetBot = target + $(this).height();
var id = $(this).attr('id'); //this element ID - should be same as data-id on your nav link
$('nav a[data-id=' + id + ']').removeClass('hovered'); //clearing
if (position >= target && targetBot >= position) { //if you are scrolled over element with some id
$('nav a[data-id=' + id + ']').addClass('hovered');
//this will check wich element you are scrolled on and selects in menu that item with same data-id :)
}
});
});section{
float:left;
width:100%;
height:1000px;
color:white;
font-size:70px;
display:flex;
flex-wrap:wrap;
align-content:center;
align-items:center;
justify-content:center;
}
#mainSection{background:red;}
#nextSection{background:blue;}
#lastSection{background:gray;}
nav{
position:fixed;
top:0px;
left:0px;
width:400px;
}
nav a{
float:left;
width:100%;
text-align:left;
background:white;
padding:5px 15px;
}
nav a.hovered{
background:black;
color:white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<nav>
<a href="" data-id="mainSection">Main section</a>
<a href="" data-id="nextSection">Next section</a>
<a href="" data-id="lastSection">Last section</a>
</nav>
<section class="section" id="mainSection">
Hello :)
</section>
<section class="section" id="nextSection">
Hello :)
</section>
<section class="section" id="lastSection">
Hello :)
</section>
</body>关于jquery - 在到达特定部分时在菜单项下划线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58219371/