点击跳到指定位置类似于电梯导航
.w {
width: 1200px;
margin: 0 auto;
}
.fixedtool {
position: fixed;
top: 100px;
left: 50%;
margin-left: -676px;
width: 66px;
background-color: #fff;
display: none;
}
.fixedtool li {
height: 32px;
line-height: 32px;
text-align: center;
font-size: 12px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.fixedtool .current {
background-color: #c81623;
color: #fff;
}
<div class="fixedtool">
<ul>
<li class="current">家用电器</li>
<li>手机通讯</li>
<li>电脑办公</li>
<li>精品家具</li>
</ul>
</div>
分析:
① 当我们滚动到 今日推荐 模块,就让电梯导航显示出来
$(function(){
var toolTop = $(".recommend").offset().top;
if ($(document).scrollTop() >= toolTop) {
$(".fixedtool").fadeIn();
} else {
$(".fixedtool").fadeOut();
};
})
② 点击电梯导航页面可以滚动到相应内容区域
③ 核心算法:因为电梯导航模块和内容区模块一一对应的
④ 当我们点击电梯导航某个小模块,就可以拿到当前小模块的索引号
⑤ 就可以把animate要移动的距离求出来:当前索引号内容区模块它的offset().top
⑥ 然后执行动画即可
// 2. 点击电梯导航页面可以滚动到相应内容区域
$(".fixedtool li").click(function() {
//console.log($(this).index());
// 当我们每次点击小li 就需要计算出页面要去往的位置
// 选出对应索引号的内容区的盒子 计算它的.offset().top
var current = $(".floor .w").eq($(this).index()).offset().top;
// 页面动画滚动效果
$("body, html").stop().animate({
scrollTop: current
});
})
})
刷新页面时发现电梯导航不见了,是因为只有在页面滚动的时候才加载动画,为了避免这种情况的出现,我们可以封装成一个函数,只要加载完成就调用这个函数,在页面滚动的时候也调用这个函数。
toggleTool();
function toggleTool() {
if ($(document).scrollTop() >= toolTop) {
$(".fixedtool").fadeIn();
} else {
$(".fixedtool").fadeOut();
};
}
⑦ 当我们点击电梯导航某个小li, 当前小li 添加current类,兄弟移除类名
// 点击之后,让当前的小li 添加current 类名 ,姐妹移除current类名
$(this).addClass("current").siblings().removeClass();
⑧ 当我们页面滚动到内容区域某个模块, 左侧电梯导航,相对应的小li模块,也会添加current类, 兄弟移除current类。
⑨ 触发的事件是页面滚动,因此这个功能要写到页面滚动事件里面。
⑩ 需要用到each,遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
⑪判断的条件: 被卷去的头部 大于等于 内容区域里面每个模块的offset().top
⑫就利用这个索引号找到相应的电梯导航小li添加类文章来源:https://www.toymoban.com/news/detail-428162.html
// 页面滚动到某个内容区域,左侧电梯导航小li相应添加和删除current类名
$(".floor .w").each(function(i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
console.log(i);
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
}
})
当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current,可以使用节流阀(互斥锁)来控制
整合所有代码文章来源地址https://www.toymoban.com/news/detail-428162.html
$(function() {
// 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
// 节流阀 互斥锁
var flag = true;
// 1.显示隐藏电梯导航
var toolTop = $(".recommend").offset().top;
toggleTool();
function toggleTool() {
if ($(document).scrollTop() >= toolTop) {
$(".fixedtool").fadeIn();
} else {
$(".fixedtool").fadeOut();
};
}
$(window).scroll(function() {
toggleTool();
// 3. 页面滚动到某个内容区域,左侧电梯导航小li相应添加和删除current类名
if (flag) {
$(".floor .w").each(function(i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
console.log(i);
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
}
})
}
});
// 2. 点击电梯导航页面可以滚动到相应内容区域
$(".fixedtool li").click(function() {
flag = false;
console.log($(this).index());
// 当我们每次点击小li 就需要计算出页面要去往的位置
// 选出对应索引号的内容区的盒子 计算它的.offset().top
var current = $(".floor .w").eq($(this).index()).offset().top;
// 页面动画滚动效果
$("body, html").stop().animate({
scrollTop: current
}, function() {
flag = true;
});
// 点击之后,让当前的小li 添加current 类名 ,兄弟节点移除current类名
$(this).addClass("current").siblings().removeClass();
})
})
到了这里,关于电梯导航栏的实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!