JS 5.30 京东侧边导航栏滑动（window.pageYoffset)

k1076731326

已于 2024-05-30 21:33:06 修改

阅读量139

点赞数 3

文章标签： javascript css 前端

于 2024-05-30 21:31:07 首次发布

本文链接：https://blog.csdn.net/k1076731326/article/details/139335124

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 全局样式重置 */
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        /* 宽度为1200px居中 */
        .w {
            width: 1200px;
            margin: 0 auto 20px;
        }

        /* 头部样式 */
        .header {
            height: 200px;
            background-color: red;
        }

        /* 横幅样式 */
        .banner {
            height: 400px;
            background-color: blue;
        }

        /* 主体样式 */
        .main {
            height: 1000px;
            background-color: green;
        }

        /* 侧边栏样式 */
        .slider-bar {
            position: absolute;
            top: 300px;
            /* 相对单位 */
            right: 109px;
            width: 50px;
            height: 260px;
            background-color: pink;
        }

        /* 回到顶部按钮样式 */
        .goBack {
            display: none;
            position: absolute;
            bottom: 0;
            cursor: pointer;
            color: white;
            background-color: black;
            padding: 5px;
        }
    </style>
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function () {
            // 获取元素
            var sliderbar = document.querySelector('.slider-bar');
            var span = document.querySelector('.goBack');

            // 动态计算滚动位置的阈值
            var scrollThreshold = document.querySelector('.banner').offsetTop;

            // 监听滚动事件
            window.addEventListener('scroll', function () {
                // 获取当前滚动位置
                var scrollPosition = window.pageYOffset;

                // 判断滚动位置，设置侧边栏的定位方式和回到顶部按钮的显示状态
                if (scrollPosition >= scrollThreshold) {
                    sliderbar.style.position = 'fixed';
                    sliderbar.style.top = '75px';
                    span.style.display = 'block';
                } else {
                    sliderbar.style.position = 'absolute';
                    sliderbar.style.top = '300px';
                    span.style.display = 'none';
                }
            });
        });
    </script>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">回到顶部</span>
    </div>
    <div class="header w"></div>
    <div class="banner w"></div>
    <div class="main w"></div>

</body>

</html>