思路:由于是页面滚动,所以需要使用scroll滚动事件,事件源为document。滚动到某个位置就是判断页面被卷去的上部分值。
页面被卷去的头部:通过window.pageYoffset获得 若是被卷去的是左侧 通过window.pageXoffset获得。
注:若是元素被卷去的头部用scrollTop
<!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" />
<title>Document</title>
<style>
.slider-bar {
position: absolute;
top: 300px;
left: 50%;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: pink;
}
.w {
width: 1200px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: aqua;
}
.banner {
height: 250px;
background-color: yellow;
}
.main {
height: 1000px;
background-color: green;
}
span {
display: none;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
//获取元素
var sliderbar = document.querySelector(".slider-bar");
var banner = document.querySelector(".banner");
var bannerTop = banner.offsetTop;
var sliderbarTop = sliderbar.offsetTop - bannerTop;
var main = document.querySelector(".main");
var goBack = document.querySelector(".goBack");
var mainTop = main.offsetTop;
//页面滚动事件
document.addEventListener("scroll", function() {
//console.log(window.pageYOffset);
//当页面被卷去大于等于banner上面的距离时,就把侧边栏改为固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = "fixed";
sliderbar.style.top = sliderbarTop + "px";
} else {
sliderbar.style.position = "absolute";
sliderbar.style.top = "300";
}
//当页面被卷去大于等于main上面的距离时,就把侧边栏中的内容显示
if (window.pageYOffset >= mainTop) {
goBack.style.display = "block";
} else {
goBack.style.display = "none";
}
});
</script>
</body>
</html>