1. 原先侧边栏是绝对定位（相对于body来定位）
2. 当页面滚动到一定位置时（header部分全部被卷去时），侧边栏改为固定定位
3. 页面继续滚动，会让“返回顶部”显示出来（滚动到main区域时，显示“返回顶部”）
- 需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是document
- 滚动到某个位置，就是判断页面被卷去的上部值
- 页面被卷去的头部：可以通过window.pageYOffset获得。如果是被卷去的左侧，则使用window.pageXOffset
注意，元素被卷去的头部是element.scrollTop，如果是页面被卷去的头部则是window.pageYOffset
4. 返回顶部的功能：
- 带有动画的返回顶部：此时可以使用封装好的动画函数，只需要把所有的left相关的值改为跟页面垂直滚动距离相关就可以了
- 页面滚动了多少，可以通过window.pageYOffset得到
- 最后是页面滚动，返回到顶部，滚动窗口至文档中的特定位置，使用window.scroll(x, y)
<!-- CSS样式 --> <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; position: absolute; bottom: 0; } </style>
<!-- slider-bar是相对于body定位的，body的头部是header，也就是当slider-bar是相对定位时，距离header的距离为300px --> <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'); // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面 var bannerTop = banner.offsetTop // 当我们侧边栏固定定位之后应该变化的数值 var sliderbarTop = sliderbar.offsetTop - bannerTop; // 获取main 主体元素 var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; // 2. 页面滚动事件 scroll document.addEventListener('scroll', function() { // window.pageYOffset 页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; // 注意：变成固定定位后，top值也要改，否则侧边栏会跳下来 sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } // 4. 当我们页面滚动到main盒子，就显示 goback模块 if (window.pageYOffset >= mainTop) { goBack.style.display = 'block'; } else { goBack.style.display = 'none'; } }); // 5. 当点击了返回顶部模块，就让窗口滚动到页面的最上方 goBack.addEventListener('click', function() { // 里面的x和y不跟单位，直接写数字即可 // 因为是窗口滚动，所以对象是window animate(window, 0); }); // 动画函数 function animate(obj, target, callback) { // console.log(callback); callback = function() {} 调用的时候 callback() // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 // 把我们步长值改为整数 不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - window.pageYoffset) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (window.pageYoffset == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); // 回调函数写到定时器结束里面 // if (callback) { // // 调用函数 // callback(); // } // 注意此处的优化代码 callback && callback(); } // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10 // obj.style.left = window.pageYoffset + step + 'px'; window.scroll(0, window.pageYoffset + step) }, 15); } </script>