Home > Article > Web Front-end > html+css+jquery achieves floor scrolling effect
html+css+jquery achieves floor scrolling effect
- php中世界最好的语言Original
- 2018-03-15 11:54:422794browse
This time I will bring you html+css+jquery to achieve the floor scrolling effect, and html+css+jquery to achieve the floor scrolling effect. What are the precautions?The following is a practical case, let's take a look.
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>
<p id="header"></p>
<p class="floor" id="f1">
<p>第一层</p>
</p>
<p class="floor" id="f2">
<p>第二层</p>
</p>
<p class="floor" id="f3">
<p>第三层</p>
</p>
<p 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>
</p>
<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)
})
})();
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
JS implements positioning navigation bar
How to create paging effect with jquery
How to deal with jQuery being unable to trigger the binding event when adding elements
Regular verification formula for mobile phone number
The above is the detailed content of html+css+jquery achieves floor scrolling effect. For more information, please follow other related articles on the PHP Chinese website!