侧边栏+返回顶部按钮实现
头部
主体
<script>
var sidebar = document.querySelector('.sidebar');
var banner = document.querySelector('.banner');
var main = document.querySelector('.main');
var goback = document.querySelector('.goback');
var mainTop = main.offsetTop;
console.log(mainTop);
var bannerTop = banner.offsetTop;
var sidebarTop = sidebar.offsetTop - bannerTop;
var backTop = sidebar.offsetTop - mainTop;
document.addEventListener('scroll', function(){
if (window.pageYOffset >= bannerTop) {
sidebar.style.position = 'fixed';
sidebar.style.top = sidebarTop + 'px';
} else {
sidebar.style.position = 'absolute'
sidebar.style.top = 220 + 'px';
}
if (window.pageYOffset >= mainTop) {
goback.style.display = 'block';
} else {
goback.style.display = 'none'
}
goback.addEventListener('click', function (){
document.documentElement.scrollTop = document.body.scrollTop =0;
});
});
</script>