如何解决哈希链接与导航菜单不匹配
当我点击导航栏项目时,哈希链接滚动事件与正确的导航菜单项不匹配
我试图向上或向下更改 'scrollto' 变量,但问题仍然存在
下面是代码:
// Smooth scroll for the menu and links with .scrollto classes
var scrolltoOffset = $('#header').outerHeight() - 21;
var clicked = false;
$('.nav-menu a,#mobile-nav a,.scrollto').on('click',function(e) {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
debugger;
if (target.length) {
e.preventDefault();
var scrollto = target.offset().top - scrolltoOffset;
if ($(this).attr("href") == '#header') {
scrollto = 0;
}
$('html,body').animate({
scrollTop: scrollto
},1500,'easeInOutExpo');
if ($(this).parents('.nav-menu').length) {
$('.nav-menu .menu-active').removeClass('menu-active');
$(this).closest('li').addClass('menu-active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('#mobile-body-overly').fadeOut();
}
return false;
}
}
});
这是直播网站innovators.com
解决方法
容易修复。你滚动得不够。 只需少滚动两个像素:-21 => -23
// Smooth scroll for the menu and links with .scrollto classes
var scrolltoOffset = $('#header').outerHeight() - 23;
var clicked = false;
$('.nav-menu a,#mobile-nav a,.scrollto').on('click',function(e) {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
debugger;
if (target.length) {
e.preventDefault();
var scrollto = target.offset().top - scrolltoOffset;
if ($(this).attr("href") == '#header') {
scrollto = 0;
}
$('html,body').animate({
scrollTop: scrollto
},1500,'easeInOutExpo');
if ($(this).parents('.nav-menu').length) {
$('.nav-menu .menu-active').removeClass('menu-active');
$(this).closest('li').addClass('menu-active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('#mobile-body-overly').fadeOut();
}
return false;
}
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。