学习来源:https://www.bilibili.com/video/BV1HJ41147DG
要求
- 原先侧边栏是绝对定位
- 当页面滚动到一定位置,侧边栏改为固定定位
- 页面继续滚动,会让返回顶部显示出来
思路
4. 需要用到页面滚动事件 scroll 因为是页面滚动,所以事件源是 document
5. 滚动到某个位置,就是判断页面被卷去的上部值。
6. 页面被卷去的头部:可以通过 window.pageYOffset 获得,如果是被卷去的左侧 window.pageXOffset
7. 注意,元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部则是 window.pageYOffset
8. 其实这个值 可以通过盒子的 offsetTop 可以得到,如果大于等于这个值,就可以让盒子固定定位了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.slider-bar {
position: absolute;
left: 50%;
top: 800px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: red;
text-align: center;
}
.com {
width: 1200px;
margin: 10px auto;
}
.header {
height: 200px;
background-color: purple;
}
.banner {
height: 500px;
background-color: skyblue;
}
.main {
height: 2000px;
background-color: yellowgreen;
}
span {
display: none;
position: absolute;
bottom: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header com">头部区域</div>
<div class="banner com">banner区域</div>
<div class="main com">主体部分</div>
<script>
// 获取元素
var sliderbar = document.querySelector('.slider-bar');
var goBack = document.querySelector('.goBack');
var banner = document.querySelector('.banner');
var main = document.querySelector('.main');
// banner.offestTop 就是被卷去头部的大小,一定要写到滚动的外面
var bannerTop = banner.offsetTop;
// 当侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
var mainTop = main.offsetTop;
// 页面滚动事件 scroll
document.addEventListener('scroll', function () {
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '800px';
}
// 当页面滚动到 main 盒子,就显示 goback 模块
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
</script>
</body>
</html>