jQuery电梯楼层实现
程序员文章站
2022-07-02 16:05:17
...
实现需求：
1、当滚动到一定高度，显示和隐藏右边的floor
2、点击floor 里面的标签 跳到对应显示主页面的内容区域
3、点击floor 让当前的标签的样式改变，比如背景和颜色，其余不变
4、滚动页面时 ，让floor里面的标签和主页面对应区域一致
直接上代码。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
div {
height: 600px;
width: 100%;
font-size: 80px;
color: #fff;
line-height: 600px;
text-align: center;
}
div:nth-child(1) {
background: pink;
}
div:nth-child(2) {
background: orange;
}
div:nth-child(3) {
background: blue;
}
div:nth-child(4) {
background: red;
}
div:nth-child(5) {
background: skyblue;
}
div:nth-child(6) {
background: gray;
}
div:nth-child(7) {
background: black;
}
ul {
width: 40px;
background: #fff;
/* position: absolute; */
position: fixed;
right: 20px;
top: 150px;
display: none;
}
li {
font-size: 15px;
text-align: center;
line-height: 20px;
cursor: pointer;
border-bottom: 2px solid purple;
}
li:last-child {
border: 0;
}
.active {
color: indianred;
background: yellowgreen;
}
</style>
</head>
<body>
<div class="header">顶部</div>
<div class="banner">轮播图</div>
<div class="product floor">商品分类</div>
<div class="show floor">潮牌展示</div>
<div class="moreactive floor">更多活动</div>
<div class="link floor">名店链接</div>
<div class="footer">底部</div>
<ul class="list">
<li class="active">商品分类</li>
<li>潮牌展示</li>
<li>更多活动</li>
<li>名店链接</li>
<li class="returnTop">返回顶部</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$(function () {
// 先获取滚动到第一个需要显示floor的元素的高度
var first_top = $(".product").offset().top
// 定义一个变量存状态 或者说是 节流阀 互斥锁
var flag = true
// 封装动画效果函数
function toggleTool() {
var scroll_top = $("html,body").scrollTop()
// console.log(scroll_top)
if (scroll_top > first_top) {
$(".list").fadeIn()
} else {
$(".list").fadeOut()
}
}
// toggleTool()
$(document).on("scroll", throttling(function () {
// 第一种把定位方式改一下
// var scroll_top = $("html,body").scrollTop()
// if (scroll_top >= first_top) {
// $(".list").css({
// position: "fixed",
// top: 100
// })
// } else {
// $(".list").removeAttr("style")
// }
// 第二种是淡入淡出 而定位不用改变
toggleTool()
// 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
if (flag) {
$(".floor").each(function (i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
// console.log(i)
$(".list li").eq(i).addClass("active").siblings("li").removeClass("active")
}
})
}
}, 200))
// 点击li 跳到当前对应页面元素位置 并让当前li的背景改变其余不变
$(".list li:lt(4)").on("click", function () {
// console.log(1)
flag = false
// console.log($(this).index())
var current = $(".floor").eq($(this).index()).offset().top
$("body,html").stop().animate({
scrollTop: current
}, function () {
flag = true
})
// 让当前背景改变其余不变
$(this).addClass("active").siblings("li").removeClass("active")
})
// 返回顶部
$(".returnTop").on("click", function () {
$("body,html").stop().animate({
scrollTop: 0
})
})
// 封装：函数节流，用于防止用户多次滚动滚动条;
function throttling(callback, delay) {
var t = null;
return function () {
if (t !== null) {
return false;
}
t = setTimeout(function () {
t = null;
callback();
}, delay)
}
}
})
</script>
</body>
</html>
效果图如下
上一篇： Mysql-5.7.20主从复制测试[20180110]
下一篇： MySQL数据库设计规范