淘宝侧边栏

岁月神偷もう

于 2022-07-11 16:12:55 发布

阅读量97

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_71939262/article/details/125723959

版权

淘宝侧边栏

<!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>
.w{
    width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.header{
height: 150px;
background-color: aqua;
}
.banner{
height: 250px;
background-color: palegoldenrod;
}
.main{
height: 1000px;
background-color: pink;
}
.sliderbar{
    position: absolute;
    top:300px;
    left: 50%;
    margin-left: 600px;
    width: 45px;
    height: 130px;
    background-color: brown;

}
span{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: blue;
}
    </style>
</head>
<body>
    <div class="sliderbar">
        <span class="goback">侧边栏</span>
    </div>
    <div class="header w ">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主题区域</div>
    <!-- <script type="text/javascript" src="侧边栏.js"></script> -->
    <script>
    //1.当页面被卷去的部分到达banner头部时,滑动块改为固定定位,距离页面顶端距离为
//sliderbarTop=sliderbar.offsetTop-bannerTop
//bannerTop=banner.offsetTop
//文档被卷去的头部为 window.pageYOffset
//1.获取元素
var banner = document.querySelector('.banner');
var sliderbar=document.querySelector('.sliderbar');

var bannerTop = banner.offsetTop;
var sliderbarTop=sliderbar.offsetTop-bannerTop;


var goback=document.querySelector('.goback');
var main=document.querySelector('.main');
var mainTop=main.offsetTop;

//2.给文档添加滚动事件
document.addEventListener('scroll',function(){
    //滚动到banner区域时,滑动块改为固定定位,距离页面顶端距离为
    //sliderbarTop=sliderbar.offsetTop-bannerTop
    if(window.pageYOffset>=bannerTop){
        sliderbar.style.position='fixed';
        sliderbar.style.top=sliderbarTop+'px';
    }else{
        sliderbar.style.position='absolute';
        sliderbar.style.top='300px';
    }
    //滚动到main区域时,goback部分显示出来
    if(window.pageYOffset>=mainTop){
       goback.style.display='block';
    }else{
        goback.style.display='none';
    }
})
</script>
</body>
</html>