<!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: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.w {
width: 960px;
margin: auto;
}
body {
color: white;
text-align: center;
font-size: 30px;
font-weight: 900;
}
/* div{
color: #353b5f;
color: #c7cd85;
color: #b3bbc8;
color:#c0a997 ;
color: #e7bab7;
} */
header {
height: 70px;
background-color: #c0a997;
line-height: 70px;
}
section {
height: 800px;
display: flex;
line-height: 500px;
}
.left {
width: 300px;
background-color: #e7bab7;
}
.right {
background-color: #c7cd85;
flex: 1;
}
.navul {
overflow: hidden;
width: 50px;
height: 360px;
background-color: #353b5f;
font-size: 12px;
display: none;
position: fixed;
right: 10px;
bottom: 100px;
}
.navul li {
height: 40px;
line-height: 40px;
border: 1px solid #c0a997;
box-sizing: border-box;
}
.bodyul li {
height: 400px;
background-color: #b3bbc8;
}
.bodyul li span {
color: white;
height: 80px;
display: block;
line-height: 80px;
width: 100%;
background-color: #353b5f;
}
.box {
width: 100%;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
position: fixed;
top: 0;
left: 0;
display: none;
}
.active {
color: red;
}
footer {
height: 70px;
background-color: #c0a997;
line-height: 70px;
}
</style>
</head>
<body>
<div class="box">我是吸顶盒子</div>
<header>我是导航栏</header>
<section class="w">
<div class="left">我是左边分类栏</div>
<div class='right'>我是右边轮播图</div>
</section>
<div class="navul">
<ul>
<li name="other" class="active">零食</li>
<li name="other">衣物</li>
<li name="other">生鲜</li>
<li name="other">电器</li>
<li name="other">美妆</li>
<li name="other">玩具</li>
<li name="other">服饰</li>
<li name="other">鞋帽</li>
<li name="gotop">回到顶部</li>
</ul>
</div>
<ul class="bodyul w">
<li name="bodyulli">
<span>零食专区</span>
<div></div>
</li name="bodyulli">
<li>
<span>衣物专区</span>
<div></div>
</li>
<li name="bodyulli">
<span>生鲜专区</span>
<div></div>
</li>
<li name="bodyulli">
<span>电器专区</span>
<div></div>
</li>
<li name="bodyulli">
<span>美妆专区</span>
<div></div>
</li>
<li name="bodyulli">
<span>玩具专区</span>
<div></div>
</li>
<li name="bodyulli">
<span>服饰专区</span>
<div></div>
</li>
<li name="bodyulli">
<span>鞋帽专区</span>
<div></div>
</li>
</ul>
<footer></footer>
<script src="./jquery.min.js"></script>
<script>
$(window).scroll(function () {
// 当 页面 上卷至 指定高度时 让 吸顶div 和 侧边栏div 显示
if ($(window).scrollTop() > 500) {
// 以运动的方式显示
$('.box').stop().slideDown(1000)
$('.navul').stop().fadeIn(1000)
} else {
// 以运动的方式隐藏
$('.box').stop().slideUp(1000)
$('.navul').stop().fadeOut(1000)
}
// 循环遍历 给 所有的楼层li 添加 判断
$('.bodyul li').each(function (key, item) {
// 如果 上卷高度 + 预留高度 > 楼层li距离页面顶部间距
if ($(window).scrollTop() + 500 > $(item).offset().top) {
// 给 楼层li 对应的 侧边栏li 添加 css
// 其他 侧边栏 li 清除 css
$('.navul ul li').removeClass('active').eq(key).addClass('active');
}
})
})
$('.navul li').click(function (e) {
// 点击标签的name属性是back 点击都是 返回顶部标签
// 页面上卷高度 是 770
// 通过 运动完成
if ($(e.target).attr('name') === 'gotop') {
$('html').animate({ scrollTop: 770 }, 1000)
} else if ($(e.target).attr('name') === 'other') {
// 点击标签的name属性是other 点击都是 侧边栏li标签
// 页面上卷高度 是 点击的侧边栏li 对应的 楼层li 距离页面顶部的间距
// 按照 点击的侧边栏li的索引下标 查询 楼层导航li 获取 顶部间距
$('html').animate({ scrollTop: $('.bodyul li').eq($(e.target).index()).offset().top - 300 }, 500);
}
})
</script>
</body>
</html>
运行结果