目标效果：
1.当页面滚动到banner区域的顶部碰到页面顶部时，右边的侧边栏sliderbar，由之前距离页面顶部300px的固定定位，变为 侧边栏sliderbar距离页面顶部的距离=页面滚动前侧边栏sliderbar距离banner区域顶部的距离
e.g.页面滚动前：
e.g.页面滚动到banner区域顶部之后：
2.页面滚动到main部分的顶部的时候，右边的侧边栏sliderbar显示文字“返回顶部”
<!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;left: 50%;top: 300px;margin-left: 600px;width: 45px;height: 130px;background-color: pink;}.w {width: 1200px;margin: 10px auto;}.header {height: 150px;background-color: purple;}.banner {height: 250px;background-color: skyblue;}.main {height: 1000px;background-color: yellowgreen;}span {display: none;/* 最开始goBack设置的是隐藏 */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>//1.获取元素var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');var main = document.querySelector('.main');var goBack = document.querySelector('.goBack');//element.offsetTop如果该元素 没有父亲/父亲没有定位,则返回 距离body上方的偏移量(返回值无单位)//banner以上到body的距离// console.log(banner.offsetTop);var bannerTop = banner.offsetTop;//console.log(sliderbar.offsetTop);var sliderbarTop = sliderbar.offsetTop - bannerTop;var mainTop = main.offsetTop;//2.页面滚动事件//因为是页面滚动，所以事件源是documentdocument.addEventListener('scroll', function () {//获取页面被卷去的头部// console.log(window.pageYOffset);// 3 .当页面被卷去的头部大于等于了 bannerTop时 侧边栏sliderbar就要改为固定定位if (window.pageYOffset >= bannerTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';} else {//恢复为之前的绝对定位sliderbar.style.position = 'absolute';//恢复为之前的top值sliderbar.style.top = '300px';}// 3 .当页面滚动到main盒子，就显示 goback模块if (window.pageYOffset >= mainTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}})</script></body></html>
