固定侧边栏

最新推荐文章于 2024-04-16 09:44:38 发布

奇葩之小王子

最新推荐文章于 2024-04-16 09:44:38 发布

阅读量683

点赞数

文章标签： js html css

本文链接：https://blog.csdn.net/qq_52138438/article/details/115028441

版权

固定侧边栏 – 实现当滚动条下滑到某个位置时侧边栏绝对固定并显示相应文字

<!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>
        .slider-bar{
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        .w{
            width: 1200px;
            margin: 10px auto;
        }
        .banner{
            height: 250px;
            background-color: skyblue;
        }
        .header{
            height: 150px;
            background-color: purple;
        }
        .main{
            height: 1000px;
            background-color: yellow;
        }
        span{
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <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');
        var bannerTop = banner.offsetTop;
        //当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        //获取主体元素
        var main = document.querySelector('.main');
        var goback = document.querySelector('.goback')
        var mainTop = main.offsetTop;
         
        //页面滚动事件
        document.addEventListener('scroll',function(){
            //window.pageYoffset 页面被卷去的头部
            //当我们页面被卷去头部大于等于某个值时  此时侧面栏就要改成固定定位
            if(window.pageYOffset>=bannerTop)
            {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            }else{
                sliderbar.style.position = 'absolute';
            }

            //当我们页面滚动到main盒子，就显示goback模块
            if(window.pageYOffset>=mainTop)
            {
               goback.style.display = 'block';
            }else{
                goback.style.display = 'none';
            }
        })
    </script>
</body>
</html>

奇葩之小王子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
固定侧边栏

固定侧边栏 – 实现当滚动条下滑到某个位置时侧边栏绝对固定并显示相应文字<!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, init
复制链接

扫一扫