用多个菜单改变滚动上的活动菜单项
Change Active Menu Item on Scroll with Multiple Menus
我有一个单页滚动网站,并想改变我的链接的活动类滚动和点击。我从这个网站上找到了一些很棒的片段,它们完成了一半的工作(对于那些感兴趣的人来说,这也可以实现平滑滚动):
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
出现的问题是,我有多个菜单,在不同的屏幕尺寸可见。我正在努力寻找一种方法来同时改变两个菜单项上的活动类。
如有任何建议,不胜感激
我自己解决了这个问题,但我希望有一个更干净的解决方案。我只是复制了下面的代码:'
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('#nav-minor a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('#nav-minor a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPo = $(document).scrollTop();
$('#nav-minor a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPo && refElement.position().top + refElement.height() > scrollPo) {
$('#nav-minor a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
虽然二级菜单的ID不同:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('#nav-main li a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('#nav-main li').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#nav-main li a').each(function () {
var currItem = $(this);
var refElement = $(currItem.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#nav-main li a').removeClass("active");
currItem.addClass("active");
}
else{
currItem.removeClass("active");
}
});
}
如果有人有更好的答案将不胜感激。现在纯粹出于学术原因:-)'
相关文章:
- 显示菜单项
- 如何定义和渲染子菜单项,使用Aurelia's路由器
- 如何在没有2个项目的情况下更改菜单项href
- JQuery超级菜单全宽菜单项
- jQuery在部分上滚动时突出显示菜单项
- 突出显示菜单项及其子菜单项
- 突出显示菜单栏上的活动菜单项
- 使用CSS/JavaScript在活动页面上突出显示活动导航菜单项,无id
- ng-class 用于突出显示基于 ng 重复的活动菜单项.AngularJS.
- 如何在滚动和单击时突出显示活动菜单项
- 单击并处于活动状态时高亮显示菜单项
- jQuery UI菜单获取/设置活动UI菜单项
- Angular引导活动菜单项
- 用多个菜单改变滚动上的活动菜单项
- 我怎样才能让课堂活动到菜单项
- jQuery,菜单导航栏中的活动菜单项
- 更改页面滚动上的活动菜单项
- java脚本在子项处于活动状态时更改父菜单项
- 使用jQuery在页面滚动上突出显示活动菜单项
- 高亮显示“页面滚动”上的活动菜单项