<style>
body{
margin:0 auto;
width: 800px;
}
.goBack{
display: none;
}
.aside{
background-color: pink;
width: 50px;
height: 200px;
position: absolute;
top: 400px;
left: 1400px;
}
.header{
background-color: red;
width: 800px;
height: 400px;
}
.main{
background-color: green;
width: 800px;
height: 500px;
}
.footer{
background-color: gray;
width: 800px;
height: 1200px;
}
</style>
<html>
<div class="aside">
<a href="#" class="goBack">返回顶部</a>
</div>
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</html>
<script>
var aside = document.querySelector('.aside')
var main = document.querySelector('.main')
// mainTop是指main上面的高度
var mainTop = main.offsetTop
var footer = document.querySelector('.footer')
var footerTop = footer.offsetTop
var goBack = document.querySelector('.goBack')
// 侧边栏固定定位之后距离页面的距离
var asideTop = aside.offsetTop - mainTop
document.addEventListener('scroll',function(){
// window.pageYOffset是页面被卷去的高度，element.scrollTop是元素被卷去的高度
if(window.pageYOffset >= mainTop){
aside.style.position = 'fixed'
aside.style.top = asideTop + 'px'
}else{
aside.style.position = 'absolute'
aside.style.top = '400px'
}
if(window.pageYOffset >= footerTop){
goBack.style.display = 'block'
}else{
goBack.style.display = 'none'
}
})
</script>
