页面效果：


小伙伴们可自行补全css样式

<div class="slider-bar"><span class="goBack">返回顶部</span></div><div class="top w">头部区域</div><div class="cont w">中间区域</div><div class="main w">主体部分</div><script>const slider = document.querySelector('.slider-bar');const goBack = document.querySelector('.goBack');const hea = document.querySelector('.top');const han = document.querySelector('.cont');const main = document.querySelector('.main');// hea 距离顶部的高度const hedtop = han.offsetTop// han距离hea 的高度const hantop = slider.offsetTop - hedtop// 主体距离顶部高度const maintop = main.offsetTop;console.log(slider.offsetTop);document.addEventListener('scroll', function () {if (window.pageYOffset > 172) {slider.style.position = 'fixed'// 因为 固定定位后 会向下跑  slider.style.top = hedtop + 'px'} else {slider.style.position = 'absolute'slider.style.top = '300px'}// 显示 返回if (window.pageYOffset >= maintop) {goBack.style.display = 'block'} else {goBack.style.display = 'none'}goBack.addEventListener('click', function () {document.documentElement.scrollTop -= 50;})})

秃头桑的知识能力有限，如果有写的不对的地方，还请各位大佬批评指正，各位小伙伴如果有什么想和秃头桑说的欢迎在下方留言。