右侧侧边栏及返回顶部

最新推荐文章于 2022-10-09 22:04:42 发布

SpongeBob_Yu

最新推荐文章于 2022-10-09 22:04:42 发布

阅读量294

点赞数

文章标签： css 前端 javascript html

本文链接：https://blog.csdn.net/SpongeBob_Yu/article/details/124619007

版权

实现右侧侧边栏及返回顶部代码如下：

html

    <header>头部</header>
    <div class="banner">banner</div>
    <div class="content">主体部分</div>
    <footer>底部</footer>
    <div class="nav">
        <span class="back"><a href="#">返回顶部</a></span>
    </div>

css：

        header{
            margin:10px auto;
            width: 1220px;
            height: 200px;
            background-color: skyblue;
            text-align: center;
            line-height: 100px;
            color: #fff;
        }
        .banner{
            margin: 10px auto;
            width: 1220px;
            height: 300px;
            background-color: pink;
            text-align: center;
            line-height: 300px;
            color: #fff;
        }
        .content{
            margin: 10px auto;
            width: 1220px;
            height: 700px;
            background-color: #952;
            text-align: center;
            line-height: 700px;
            color: #fff;
        }
        footer{
            margin: 10px auto;
            width: 1220px;
            height: 200px;
            background-color: #956;
            text-align: center;
            line-height: 200px;
            color: #fff;
        }

        .nav{
            position: absolute;
            top: 500px;
            right: 50px;
            width: 40px;
            height: 150px;
            background-color: green;
            color: #fff;
            
        }
        .back{
            position: absolute;
            bottom: 0;
            display: none;
            text-align: center;
        }
        .back a{
            text-decoration: none;
            color: #fff;
        }
        .back a:hover{
            color: #ccc;
        }

js：

       // 获取元素
        var nav = document.querySelector('.nav');
        var banner = document.querySelector('.banner');
        var content = document.querySelector('.content');
        var back = document.querySelector('.back');
        var bannerTop = banner.offsetTop;
        var navTop = nav.offsetTop - bannerTop;
        var navTopTop = nav.offsetTop;
        var contentTop = content.offsetTop;
        // 页面滚动事件
        document.addEventListener('scroll',function(){
            if(window.pageYOffset >= bannerTop){
                nav.style.position = 'fixed';
                nav.style.top = navTop + 'px';

            }else{
                nav.style.position = 'absolute';
                nav.style.top = navTopTop + 'px';
            }
            if(window.pageYOffset >= contentTop){
                back.style.display = 'block';
            }else{
                back.style.display = 'none';
            }
        })

结果：

右侧侧边栏及返回顶部