// 核心代码
$(function(){
//给一个颜色数组
var colorArr = ['red','orange','yellow','green','blue','cyan','purple'];
//便利给各个导航“span”元素，和各个对应的楼层栏目元素
for(i=0;i<$('.side-nav span').length;i++){
$('.side-nav span').eq(i).css({background:colorArr[i]});
$('.floor').eq(i).css({background:colorArr[i]});
}
//安利一下知识点
//arr.push()
//push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。
//offset()
//JQ中获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。
//获取各个楼层的距离浏览器上部偏移量,并放入数组
var divTopArr = [];
for(var i=0;i<$('.floor').length;i++){
divTopArr.push($('.floor').eq(i).offset().top);
}
//给导航每个栏目按钮添加点击事件，点击导航上的每个栏目按钮，html(body)元素滑动到对应的栏目
$('.side-nav span').click(function(){
$('body,html').animate({scrollTop:divTopArr[$(this).index()]+'px'});
$('.side-nav span').removeClass('active');
$(this).addClass('active');
})
//添加页面滚轮滚动事件，
$(window).scroll(function(){
//获取获取页面当前已经滚动的scrollTop值
var scrollTop = $(window).scrollTop();
//divTopArr 遍历每一个楼层或者每个楼层对应的按钮
for(i=0;i<$('.side-nav span').length;i++){
//判断当前页面已经滚动的top值是否大于最后一个楼层top偏移量（最后一个要拿出来单算）
if(scrollTop < divTopArr[divTopArr.length-1]){
// 给一个循环动态判断的条件，若当前scrollTop值大于数组的arr[i],且小于arr[i+1],就对应的栏目按钮添加样式
if(scrollTop >= divTopArr[i] && scrollTop < divTopArr[i+1]){
$('.side-nav span').removeClass('active');
$('.side-nav span').eq(i).addClass('active');
}
}else{
//若当前scrollTop值大于数组的arr[length-1](即数组的最后一个值，最后一个栏目的offsetTop),
$('.side-nav span').removeClass('active');
$('.side-nav span').eq(divTopArr.length-1).addClass('active');
}
}
})
})
其他参考：
https://blog.csdn.net/weixin_43844392/article/details/89227244
https://blog.csdn.net/shentibeitaokong/article/details/80397826
https://www.jianshu.com/p/62318b3a5664
https://www.cnblogs.com/jinmmm/p/14297195.html
https://blog.csdn.net/liona_koukou/article/details/86087821
https://www.cnblogs.com/wangyihong/p/8056859.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery左侧悬浮导航预览代码 - 代码笔记</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/LiftEffect.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style-type:none;
}
body{
height: 4000px;background:#eee;
}
.lift-nav{
position: fixed;
top: 100px;
left: 30px;
display: none;
}
.lift-nav li{
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
padding: 10px 10px;
margin-bottom: 10px;
background: skyblue;
cursor: pointer;
}
.lift-nav li.current{
background: tomato;
}
.t1,.t2,.t3,.t4,.t5,.t6{
width: 800px;
height: 400px;
text-align: center;
line-height: 400px;
background: skyblue;
margin: 100px auto;
font-size: 30px;
color: #fff;
}
.t1{
margin-top: 200px;
}
.t2{
background: pink;
}
.t3{
background: tomato;
}
.t4{
background: grey;
}
.t5{
background: yellow;
}
.t6{
background: seagreen;
}
</style>
</head>
<body>
<div class="lift-nav">
<ul class="lift">
<li>1楼</li>
<li>2楼</li>
<li>3楼</li>
<li>4楼</li>
<li>5楼</li>
<li>6楼</li>
</ul>
</div>
<div class="lift-target">
<div class="t1">这是1楼</div>
<div class="t2">这是2楼</div>
<div class="t3">这是3楼</div>
<div class="t4">这是4楼</div>
<div class="t5">这是5楼</div>
<div class="t6">这是6楼</div>
</div>
<script type="text/javascript">
$(function(){
LiftEffect({
"control1": ".lift-nav", //侧栏电梯的容器
"control2": ".lift", //需要遍历的电梯的父元素
"target": [".t1",".t2",".t3",".t4",".t5",".t6"], //监听的内容，注意一定要从小到大输入
"current": "current" //选中的样式
});
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.daimabiji.com/" target="_blank">代码笔记</a></p>
</div>
</body>
</html>
// LiftEffect({
// "control1": ".lift2", //侧栏电梯的容器
// "control2": "#ccc", //需要遍历的电梯的父元素
// "target": [".dianti1",".dianti2",".dianti3"], //监听的内容，注意一定要从小到大输入
// "current": "xuanzhong" //选中的样式
// });
function LiftEffect(json) {
var array = []
for (var i = 0; i < json.target.length; i++) {
var t = $(json.target[i]).offset().top
array.push(t)
}
function Selected(index) {
$(json.control2).children().eq(index).addClass(json.current).siblings().removeClass(json.current)
}
$(window).on('scroll', Check)
function Check() {
var wst = $(window).scrollTop()
if (wst >= $(json.target[0]).offset().top - 100) {
$(json.control1).fadeIn(500)
} else {
$(json.control1).fadeOut(500)
}
var key = 0
var flag = true
for (var i = 0; i < array.length; i++) {
key++
if (flag) {
if (wst >= array[array.length - key] - 300) {
var index = array.length - key
flag = false
} else {
flag = true
}
}
}
Selected(index)
}
$(json.control2).children().on('click', function () {
$(window).off('scroll')
var index = $(this).index()
Selected(index)
var flag = true
for (var i = 0; i < array.length; i++) {
if (flag) {
if (index == i) {
$('html,body').stop().animate({
'scrollTop': array[i] - 50
}, 500, function () {
$(window).on('scroll', Check)
})
flag = false
} else {
flag = true
}
}
}
})
}
版权声明：本文为weixin_42995876原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。