1、先根据条件确定侧边栏盒子的定位效果
先为文档添加的滚动事件,并判断页面被卷去的头部是否>=banner距离顶部的距离,如果大于了,则说明header区域被卷上去了,就把侧标栏改为固定定位,top值改为相对banner位置的值
2、再根据是否超过main位置,来控制返回顶部模块的显示与隐藏
// banner距离顶部的距离
var bannerTop = banner.offsetTop
// 侧边栏绝对定位之后的位置
var sliderTop = sliderbar.offsetTop - banner.offsetTop
// main距离顶部的距离
var mainTop = main.offsetTop
document.addEventListener('scroll', function () {
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed'
sliderbar.style.top = sliderTop + 'px'
} else {
sliderbar.style.position = 'absolute'
sliderbar.style.top = 300 + 'px'
}
// 判断是否到了main区域,控制返回顶部的显示与隐藏
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block'
} else {
goBack.style.display = 'none'
}
})
3、返回顶部
点击后, window.srcoll(x,y)返回页面哪个位置
window.scroll(0,100)