仿淘宝固定右边侧边栏滚动更改样式案例

最新推荐文章于 2024-08-04 16:33:59 发布

软糖A

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量381

点赞数

文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/gjiawan/article/details/124489946

版权

淘宝的右边栏效果，页面滚动的时候样式发生变化，（1）盒子的定位由绝对定位改为固定定位；（2）盒子里面的返回顶部在滚动到一定位置的时候显示

以下是实现的效果图，具体细节还需要完善

代码如下

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        div {
            width: 1200px;
            margin: 0 auto;
        }

        body {
            position: relative;
            background-color: #ccc;
        }

        .nav {
            height: 40px;
            background-color: red;
        }

        .nav_side {
            position: absolute;
            top: 250px;
            /* 注意这种在页面的右侧边栏显示一个盒子的做法，直接给定像素的话，页面放大效果会改变 */
            left: 50%;
            margin-left: 600px;
            width: 80px;
            border-radius: 5px;
            background-color: #fff;
        }

        .nav_side ul li {
            height: 40px;
            line-height: 40px;
            border: 1px solid #ccc;
        }

        .header {
            height: 500px;
            background-color: skyblue;
        }

        .banner {
            position: relative;
            height: 600px;
            background-color: pink;
        }

        .like {
            height: 1500px;
            background-color: green;
        }

        .backTop {
            display: none;
        }
    </style>
</head>

<body>

    <div class="nav">nav</div>
    <div class="header">header</div>
    <div class="banner">banner</div>
    <div class="like">like</div>
    <div class="nav_side">
        <ul>
            <li>品质好货</li>
            <li>猜你喜欢</li>
            <li class="backTop">返回顶部</li>
            <li><a href="#">反馈</a></li>
            <li><a href="#">举报恐吓</a></li>
        </ul>
    </div>
</body>
<script>
    // 要求：
    // 原来右边的侧边栏是绝对定位
    // 当页面滚动到一定的位置之后，侧边栏改为固定定位
    // 页面继续滚动，会让返回顶部显示出来
    var backTop = document.querySelector('.backTop');
    var nav_side = document.querySelector('.nav_side');
    var banner = document.querySelector('.banner');
    var like = document.querySelector('.like');

    // 获取两个盒子距离页面顶部的距离，因为父元素就是body，所以不用考虑父元素的定位问题
    // 用来作为判断条件，产生相应的变化
    var sidetop = nav_side.offsetTop;
    var liketop = like.offsetTop;
    // nav_side.addEventListener('scroll', function () {
    //     //侧边的顶部距离页面可视区的顶部为0的时候就改为固定定位，定位的left=120px
    // })
    // 滚动的是页面，所以要给document添加事件，而不是别的元素
    document.addEventListener('scroll', function () {
        // 页面被卷去的头部window.pageYOffset  如果被卷去的左侧：window.pageXOffset
        console.log(window.pageYOffset);
        //判断页面滚动到了何处，用到scrollTop,返回的是被卷去的上侧的距离，返回的数值不带单位
        if (window.pageYOffset >= sidetop) {
            nav_side.style.position = 'fixed';
            nav_side.style.top = '0';
        } else {
            nav_side.style.position = 'absolute';
            nav_side.style.top = '250px';
        }
        if (window.pageYOffset >= liketop) {
            backTop.style.display = 'block';
        } else {
            backTop.style.display = 'none';
        }
    })
</script>

</html>

软糖A

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿淘宝固定右边侧边栏滚动更改样式案例

淘宝的右边栏效果，页面滚动的时候样式发生变化，（1）盒子的定位由绝对定位改为固定定位；（2）盒子里面的返回顶部在滚动到一定位置的时候显示以下是实现的效果图，具体细节还需要完善代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge".
复制链接

扫一扫