1.案例分析
① 原先侧边栏是绝对定位；
② 当页面滚动到一定位置时，侧边栏改为固定定位；
③ 页面继续滚动，会出现返回顶部模块；
④ 需要用到页面滚动事件 scroll，因为是页面滚动，所以事件源是 document；
⑤ 滚到什么位置停下？通过判断页面被卷去的上部值来确定；
⑥ 注意元素被卷去的头部通过 element.scrollTop 获得，而页面被卷去的头部则是 window.pageYOffset；
⑦ 返回顶部，即滚动窗口至文档中的特定位置window.scroll(x, y)，注意里面的参数不跟单位；
⑧ 为了在返回顶部的时候看起来更柔和一点，我们需要用到动画函数，使页面稍缓慢地滚动。
2.代码实现
<!--html文档-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="固定侧边栏.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 500px;
height: 3000px;
}
.big {
position: absolute;
width: 50px;
height: 250px;
right: 45px;
top: 400px;
}
.small1 {
width: 100%;
height: 50px;
background-color: brown;
}
.small2 {
width: 100%;
height: 50px;
background-color: rgb(53, 211, 39);
}
.small3 {
width: 100%;
height: 50px;
background-color: rgb(119, 77, 233);
}
.small4 {
width: 100%;
height: 50px;
background-color: rgb(205, 232, 56);
}
.back-top {
display: none;
width: 100%;
height: 50px;
background-color: rgb(240, 140, 11);
}
</style>
</head>
<body>
<div class="content"></div>
<div class="big">
<div class="small1">特色</div>
<div class="small2">喜欢</div>
<div class="small3">反馈</div>
<div class="small4">举报</div>
<div class="back-top">顶部</div>
</div>
</body>
</html>
//js文档
window.addEventListener('load', function() {
var big = document.querySelector('.big');
var backtop = document.querySelector('.back-top');
var fixedTop = big.offsetTop - 300;
document.addEventListener('scroll', function() {
//1.滚动到一定位置时固定不动
if (window.pageYOffset > 300) {
big.style.position = 'fixed';
big.style.top = fixedTop + 'px';
} else {
big.style.position = 'absolute';
big.style.top = '400px';
}
//2.滚动到一定位置时显示返回顶部
if (window.pageYOffset > 500) {
backtop.style.display = 'block';
} else {
backtop.style.display = 'none';
}
})
backtop.addEventListener('click', function() {
animate(window, 0);
})
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(fn, 13);
function fn() {
var step = (target - window.pageYOffset) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (window.pageYOffset == target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
}
window.scroll(0, window.pageYOffset + step);
}
}
})
运行结果：
