|
实现的效果是：
? ? ? ? ? ? ? ? 当滚动距离到达一定位置时会触发吸顶效果，让回顶部按钮出现
? ? ? ? ? ? ? ? 当滚动距离小于一定高度是不吸顶，回顶部按钮消失
? ? ? ? ? ? ? ? 点击回顶部页面和滚动距离都回到顶部
? ? ? ? ? ? ? ?
整体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* 设置头部高和颜色 */
.header{
height: 120px;
background-color: #0000FF;
}
/* 设置导航高和颜色 */
.nav{
line-height: 40px;
background-color: #00FFFF;
}
/* 设置内容高和背景颜色 */
.content{
height: 3000px;
background-color: #F5F5DC;
}
/* 设置距离顶部的高度和nav高度保持一致 */
.sticky{
padding-top: 40px;
}
/* 设置定位 */
.sticky .nav{
position: fixed;
left: 0;
top: 0;
width: 100%;
}
/* 设置返回顶部按钮的样式与定位 */
.top{
width:50px;
border:1px solid #FFD700;
position: fixed;
bottom: 50px;
right: 20px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
header
</div>
<div class="nav">
nav
</div>
<div class="content">
内容
</div>
<div class="top">
top
</div>
<script type="text/javascript">
$(function(){
// 给页面加入scroll事件
$(document).scroll(function(){
// 获取页面垂直滚动距离
var top=$(document).scrollTop()
// 如果滚动距离大于120，也就是大于header的距离时
// 给body添加一个sticky类,(目的是当body有了.sticky类时会触发 .sticky.nav
// 中设置的样式就会起作用，nav就会不动，吸在顶部，当nav吸在顶部时内容会被覆盖nav一样的高度
// 所以给body加一个padding-top:40px;的值)
if(top>120){
// 给body添加sticky类，同时.sticky .nav里的样式就可以用了，nav吸顶
$("body").addClass("sticky")
}else{
// 否则删除sticky类
$("body").removeClass("sticky")
}
// 如果滚动距离大于打开窗口的高度的一半时
if(top>$(window).innerHeight()/2){
// 回顶部按钮就会淡入效果出现
$(".top").fadeIn();
}else{
// 否则隐藏按钮
$(".top").hide();
}
})
// 点击回顶部按钮时
$(".top").click(function(){
// 当页面回顶部时添加动画效果滚动条距离用0.6s到0
$("html,body").animate({scrollTop:0},600)
})
})
</script>
</body>
</html>
PS：实现的简单吸顶回顶部效果，如果理解了可以举一反三哦
学习时遇到的小问题? ? ? ??
刚开始不理解为什么要给body加padding-top，原来是为了内容不被触发粘性定位的内容给覆盖? 哈哈哈 学到了
还有一个小技巧就是给一个元素添加一个类 并且添加这个类时下面添加子类的样式才会触发
例如这个点：
.sticky{
padding-top: 40px;
}
/* 设置定位 */
.sticky .nav{
position: fixed;
left: 0;
top: 0;
width: 100%;
}
需要仔细想想参透耶
|