jQuery实现侧边导航栏及滑动电梯效果(仿淘宝)
时间：2022-11-09 09:13:36|栏目：jquery|点击： 次
效果图
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px
}
.box {
width: 1200px;
margin: 0 auto;
position: relative;
}
.navfix {
display: none;
width: 1200px;
height: 30px;
background-color: pink;
position: sticky;
top: 0px
}
.goodetem,
.contain1 {
width: 1200px;
height: 500px;
background-color: red;
}
.contain1 {
height: 300px;
background-color: rgb(226, 111, 130);
}
.youlike {
width: 1200px;
height: 1800px;
background-color: skyblue;
}
a {
text-decoration: none;
color: black
}
.bar a {
display: block;
width: 80px;
height: 80px;
background-color: grey;
text-align: center;
line-height: 40px;
}
.bar {
width: 100px;
height: 100px;
position: absolute;
left: 1210px;
top: 200px;
}
a:hover {
color: orange
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="box">
<div class="top1" style="background-color:blue;width:1200px;height:60px;"></div>
<div class="navfix"></div>
<div class="contain1"></div>
<div class="goodetem"></div>
<div class="youlike"></div>
<div class="bar">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pinzhi">品质<br>好货</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="like">猜你<br>喜欢</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="top" style="display:none">顶部</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >反馈</a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >暴恐<br>举报</a>
</div>
</div>
<script>
$(function() {
// console.log($('.bar').offset().top);
// console.log($('.bar').offset().left);
var a = $('.bar').offset().left
$(window).scroll(function() {
console.log($('document, html').scrollTop());
if ($('document, html').scrollTop() >= $('.bar').offset().top) {
$('.bar').css('position', 'fixed')
$('.bar').css('top', 0)
$('.bar').css('left', a)
}
if ($('document, html').scrollTop() < 200) {
$('.bar').css('position', 'absolute')
$('.bar').css('top', 200)
$('.bar').css('left', 1210)
}
if ($('document, html').scrollTop() >= 300) {
$('.top').css('display', 'block')
} else {
$('.top').css('display', 'none')
}
if (
$('document, html').scrollTop() >= 65
) {
$('.navfix').css('display', 'block')
} else {
$('.navfix').css('display', 'none')
}
})
//添加bar的点击事件，返回到相应的位置上去
//优化，应该给每个小模块添加一个索引号，与大盒子相对应，一开始将所有的模块一起添加一个点击事件，再回到相对应大盒子的位置
$('.top').click(function() {
$('document, html').stop().animate({
scrollTop: 0
})
})
$('.pinzhi').click(function() {
$('document, html').stop().animate({
scrollTop: 358
})
})
$('.like').click(function() {
$('document, html').stop().animate({
scrollTop: 888
})
})
})
</script>
</body>
</html>
品优购电梯导航效果：
1、当滚动到今日推荐模块，就让电梯导航显示出来
2、点击电梯导航页面可以滚动到相应的内容区域
没必要每个模块都加一个点击事件
1、核心：电梯导航模块和内容区模块是一一对应的
根据左侧小盒子的索引号来找相应的大盒子
console.log($(this).index()); //获取点击的索引号
console.log($('.folr div').eq($(this).index())); //获取与索引号相对应的内容
2、当点击电梯导航某个小模块，就可以拿到当前小模块的索引号
3、就可以把animate要移动的距离求出来：当前索引号内容区模块他的offset（）.top
4、当页面滚动到内容区域的某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类
1、这个功能是在页面滚动的时候触发的，因此需要写在页面滚动事件里面
2、需要用到each，遍历内容区域大模块，each里面能拿到内容区域每一个模块元素和索引号
3、判断条件：被卷去的头部大于等于内容区域里面每个模块的offset（）.top。
4、利用这个索引号找到相应的电梯导航小li添加类
bug：
1、当点击小li，执行动画的时候，不需要执行页面滚动事件里面li的背景选择，不加类名--节流阀（互斥锁） var flag = true 通过多加一个判断条件来实现 当animate执行完之后，就打开页面滚动里面li的背景选择（回调函数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 600px;
margin: 10px auto;
position: relative;
}
.hoomtool,
.phone,
.diannao,
.jiayodianqi,
.shenghuo {
width: 600px;
height: 800px;
}
.hoomtool {
background-color: pink;
}
.phone {
background-color: red;
}
.diannao {
background-color: blue;
}
.jiayodianqi {
background-color: grey;
}
.shenghuo {
background-color: skyblue;
}
a {
text-decoration: none;
color: black;
font-size: 25px;
}
.bar {
width: 140px;
position: fixed;
top: 300px;
left: 20px;
display: none;
margin: 0px;
padding: 0px;
}
ul {
padding: 0px;
}
li {
list-style: none;
height: 50px;
text-align: center;
line-height: 50px;
}
.nav {
height: 400px;
background-color: purple;
}
.tuijian {
height: 50px;
background-color: rgb(121, 97, 97)
}
.current {
background-color: red;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="box">
<div class="nav"></div>
<div class="tuijian" class="dff">今日推荐</div>
<!-- 单独包括再一个大盒子里面，便于索引--内容区域 -->
<div class="folr">
<div class="hoomtool">家用电器</div>
<div class="phone">手机通讯</div>
<div class="diannao">电脑办公</div>
<div class="jiayodianqi">家居家具</div>
<div class="shenghuo">生活用品</div>
</div>
<div class="bar">
<ul>
<li class="current"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >家用电器</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >手机通讯</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >电脑办公</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >家居家具</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >生活用品</a></li>
</ul>
</div>
</div>
<script>
$(function() {
var flag = true
var a = $('.tuijian').offset().top
// console.log(a);
$('.bar').fadeOut()
$(window).scroll(function() {
//1、导航栏的显示与隐藏
if ($('document, html').scrollTop() >= a) {
$('.bar').fadeIn()
} else {
$('.bar').fadeOut()
}
//4、当页面滚动到内容区域的某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类
if (flag == true) {
$('.folr div').each(function(index, eld) {
// console.log($(eld).offset().top);
if ($('document, html').scrollTop() >= $(eld).offset().top) {
$('ul li').eq(index).addClass('current')
$('ul li').eq(index).siblings().removeClass('current')
}
})
}
})
//2、电梯对应效果
$('ul li').click(function() {
console.log($(this).index()); //获取点击的索引号
//每次点击li，就需要计算页面要去往的位置
//选出对应索引号内容区的盒子
console.log($('.folr div').eq($(this).index())); //获取与索引号相对应的内容
flag = false
// $('document,html').scrollTop($('.folr div').eq($(this).index()).offset().top)//要添加动画效果（动画滚动效果）
$('document,html').animate({
scrollTop: $('.folr div').eq($(this).index()).offset().top
//只要一滚动就会触发上面的滚动事件
}, function() {
flag = true
})
//3、点击之后让当前的li添加current类名，兄弟则移除类名
$(this).addClass('current')
$(this).siblings().removeClass('current')
})
})
</script>
</body>
</html>
