当我点击菜单项时,当前菜单没有突出显示而不是它突出显示一个菜单。但是当我删除窗口滚动事件然后它工作正常。我尝试了off()方法但它创建了标题位置问题
$(document).ready(function() {
$(window).scroll(function(event) {
$('.navmenu ul li').find('a').each(function(i) {
var s_top = $(this).attr('href');
var idd = $(this).parent().attr('id');
if (idd !== 'menu2') {
var menu_offset = $(s_top).offset().top;
if ($(window).scrollTop() >= menu_offset) {
$('#' + idd).siblings().removeClass('active');
$('#' + idd).addClass('active');
}
}
});
});
$('.navmenu ul li a').click(function(event) {
$('html, body').animate({
scrollTop: $(this.hash).offset().top - 80
}, 800);
var link_id = $(this).parent().next().attr('id');
$('#' + link_id).addClass('active');
$('#' + link_id).siblings().removeClass('active');
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navmenu" style="text-align: center;">
<ul id="menu">
<li id="menu1" class="active">
<a href="#home">Home</a>
</li>
<li id="menu2">
<a data-toggle="modal" data-target="#myModal">Customer Login</a>
</li>
<li id="menu3">
<a href="#how-works">How it works</a>
</li>
<li id="menu4">
<a href="#feature">Feautres</a>
</li>
<li id="menu5">
<a href="#pricing">Pricing</a>
</li>
<li id="menu6">
<a href="#demoit">Demo it</a>
</li>
<li id="menu7">
<a href="#faq">FAQ</a>
</li>
<li id="menu8">
<a href="#help">Help</a>
</li>
<li id="menu9" class="last">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
答案 0 :(得分:0)
我猜您的菜单高度为80px。您的点击事件有80px的差异
scrollTop: $(this.hash).offset().top - 80
所以你应该在你的滚动事件中加上80px差异,如下所示:
var menu_offset = $(s_top).offset().top - 80;