jquery实现楼层滚动效果
程序员文章站
2022-04-14 13:18:40
本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码，供大家参考，具体内容如下
html:
<...
本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码，供大家参考，具体内容如下
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<link rel="stylesheet" href="css/base.css" rel="external nofollow" >
<style>
#header,#f1,#f2,#f3{
width: 80%;
height: 500px;
background: yellow;
margin-left: 10%;
margin-top: 50px;
}
#f1{
background: green;
}
#f2{
background: red;
}
#f3{
background: blue;
}
#lift{
position: fixed;
top: 280px;
display: none;
}
.lift_btn{
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid #000;
}
.hover{
background: red;
}
</style>
</head>
<body>
<div id="header"></div>
<div class="floor" id="f1">
<p>第一层</p>
</div>
<div class="floor" id="f2">
<p>第二层</p>
</div>
<div class="floor" id="f3">
<p>第三层</p>
</div>
<div id="lift">
<ul>
<li class="lift_item">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">
<span>1</span>
</a>
</li>
<li class="lift_item">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">
<span>2</span>
</a>
</li>
<li class="lift_item">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">
<span>3</span>
</a>
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/floor.js"></script>
</body>
</html>
js:
(()=>{
var $lift=$("#lift");
$(window).scroll(()=>{
var scrolltop=$('html,body').scrolltop();
var $f1=$("#f1");
var offsettop=$f1.offset().top;
if(offsettop<scrolltop+innerheight/2)
$lift.fadein(500);
else
$lift.fadeout(500);
var $floors=$(".floor");
$floors.each((i,elem)=>{
var $f=$(elem);
if($f.offset().top<scrolltop+innerheight/2)
$lift.find(".lift_item:eq("+i+")").addclass("hover").siblings().removeclass("hover");
});
});
$lift.children("ul").on("click","li",function(){
var $li=$(this);
var i=$li.index();
var $fi=$(".floor:eq("+i+")");
var offsettop=$fi.offset().top;
$("html").animate({
scrolltop:offsettop-60
},500)
})
})();
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。