案例分析：
1，原先侧边栏是绝对定位
2，当页面滚动到一定位置（这里是滚动到 banner 到达页面顶部的时候），侧边栏改为固定定位
3，页面继续滚动，会让 “ 返回顶部 ” 显示出来 （滚动到 main 到达页面顶部的时候）
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">
<title>Title</title>
<style>
.slide-bar{
width:45px;
height:130px;
margin-left:600px;
position:absolute;
left:50%;
top:300px;
background-color: pink;
}
.header{
width:1200px;
height:150px;
background-color: purple;
margin:10px auto;
}
.banner{
width:1200px;
height:250px;
background-color: skyblue;
margin:10px auto;
}
.main{
width:1200px;
height:1000px;
background-color: yellowgreen;
margin:10px auto;
}
span{
position:absolute;
bottom:0;
display:none;
}
</style>
</head>
<body>
<div class="slide-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header">头部区域</div>
<div class="banner">banner区域</div>
<div class="main">主体区域</div>
</body>
</html>
<script>
var slideBar=document.querySelector(".slide-bar");
var banner=document.querySelector(".banner");
var bannerTop=banner.offsetTop; //banner到达页面顶部时，页面被卷去的头部的大小，一定要写到滚动的外面
var slideBarTop=slideBar.offsetTop-bannerTop; //固定定位之后，应该变化的数值
var main=document.querySelector(".main");
var goBack=document.querySelector(".goBack");
var mainTop=main.offsetTop;
//1,页面滚动事件 scroll
document.addEventListener("scroll",function () {
if (window.pageYOffset >= bannerTop)
{
slideBar.style.position="fixed";
slideBar.style.top=slideBarTop+"px";
}
else{
slideBar.style.position="absolute";
slideBar.style.top=300+"px";
}
//2，当页面滚动到main盒子，就显示 goBack 模块（“返回顶部”）
if (window.pageYOffset >=mainTop)
{
goBack.style.display="block";
}
else{
goBack.style.display="none";
}
})
</script>
关键代码
1，页面滚动前，先获得 banner距离页面顶部的值 bannerTop , 就是 侧边栏 从绝对定位变成固定 定位的 判断值
var bannerTop=banner.offsetTop;
document.addEventListener("scroll", function(){
if(window.pageYoffset >= bannerTop)
{
slideBar.style.position="fixed";
}
})
2, 同样，页面滚动前，先获得 main 距离页面顶部的值 mainTop, 即使 goBack("返回顶部“）从隐藏 变为显示的判断值
var mainTop=main.offsetTop;
document.addEventListener(”scroll", function(){
if(window.pageYoffset >=mainTop)
{
goBack.style.display="block";
}
else{
goBack.style.display="none";
}
} )
3, 侧边栏一开始距离页面顶部300px , 当侧边栏固定定位时，应该重新确定它距离页面顶部的值
var slideBarTop=slideBar.offsetTop-bannerTop;
if(window.pageYoffset >=bannerTop)
{
slideBar.style.position="fixed";
slideBar.style.top=slideBarTop + "px";
}
else{
slideBar.style.position="absolute";
slideBar.style.top=300+"px";
}
原文地址：https://www.cnblogs.com/shanlu0000/p/11506294.html
时间： 2024-11-05 14:53:03