案例分析:
实现代码:
// 电梯导航
$(function () {
// 每次点击都会执行滚动动画,滚动又会触发添加current类 此时需要节流阀(互斥锁)控制
// 节流阀
var flag = true; //节流阀默认打开
// 1.显示隐藏电梯导航
var asideTop = $(".recom").offset().top;
// 加载页面就调用函数 不用等到滚动屏幕才显示隐藏
toggleAside();
function toggleAside() {
// 滚动到相应位置时显示电梯导航栏
if ($(document).scrollTop() >= asideTop) {
$(".aside").fadeIn();
} else {
$(".aside").fadeOut();
}
};
$(window).scroll(function () {
toggleAside();
// 3.页面滚动到某个区域,对应小li添加current类名
// 节流阀打开时才执行里面代码
if (flag) {
// 遍历每个内容元素,获得索引号
// 滚动到相应内容offset().top位置时,就把对应索引号给小li
$(".floor .w").each(function (i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
// console.log(i);
$(".aside li").eq(i).addClass("current").siblings().removeClass();
}
})
}
});
// 2. 点击小li跳转到对应位置
$(".aside li").on("click", function () {
flag = false; //每次点击关闭节流阀
// 获取当前点击的小li索引号 点击第几个小li就跳转到对应第几个元素的offset().top位置
// console.log($(this).index());
var current = $(".floor .w").eq($(this).index()).offset().top;
// 只有元素可以做动画 所以用html和body
$("html,body").stop().animate({
scrollTop: current
}, function () {
// 执行完动画滚动就打开节流阀
flag = true;
});
// 给当前点击的小li添加current类名
$(this).addClass("current").siblings("li").removeClass();
});
})