前端案例-19 pageXOffset的应用，侧边栏定位方式的切换

最新推荐文章于 2023-07-05 15:40:48 发布

KathyLJQ

最新推荐文章于 2023-07-05 15:40:48 发布

阅读量331

点赞数 1

分类专栏：前端案例

本文链接：https://blog.csdn.net/KathyLJQ/article/details/115794792

版权

前端案例专栏收录该内容

32 篇文章 3 订阅

订阅专栏

在这里插入图片描述

<!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;
        }
        
        body {
            height: 5000px;
        }
        
        header {
            width: 100%;
            height: 40px;
            background-color: cornflowerblue;
        }
        
        nav {
            width: 100%;
            height: 300px;
            background-color: darkcyan;
            margin: 20px 0;
        }
        
        .main {
            position: relative;
            width: 100%;
            height: 500px;
            background-color: rgb(2, 48, 48);
            margin: 20px 0;
        }
        
        .main .rightBar {
            position: absolute;
            top: 100px;
            left: 100%;
            transform: translateX(-100%);
            height: 300px;
            width: 50px;
            background-color: darkgoldenrod;
            border-radius: 50px;
            list-style: none;
        }
        
        .main .rightBar li {
            margin-left: 10px;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        
        .main .rightBar li:last-child {
            display: block;
        }
        
        footer {
            width: 100%;
            height: 100px;
            background-color: rgb(1, 14, 14);
            margin: 20px 0;
        }
    </style>
</head>

<body>
    <header></header>

    <nav></nav>
    <div class="main">
        <ul class="rightBar">
            <li>电器</li>
            <li>女装</li>
            <li>百货</li>
            <li>日化</li>
            <li>返回</li>
        </ul>
    </div>
    <footer></footer>
</body>

<script>
    var mainBody = document.querySelector('.main');
    var rightBar = document.querySelector('.rightBar');
    var goBack = document.querySelector('.main .rightBar li:last-child');
    //计算侧边栏滑到顶部时，被卷去的浏览器页面高度

    var distanceBodyTop = mainBody.offsetTop + rightBar.offsetTop;

    window.addEventListener('scroll', function() {
        //获取侧边栏距离页面顶端的距离
        var h = window.pageYOffset;

        //当侧导航栏滑到与浏览器页面的上边缘时将侧边栏的定位改成固定定位
        if (h >= distanceBodyTop) {
            rightBar.style.position = 'fixed';
            rightBar.style.top = '0px';

        } else {
            rightBar.style.position = 'absolute';
            rightBar.style.top = '100px';
        }

        //当主体模块回到原始位置时，显示“返回”
        if (h <= 0) {
            goBack.style.display = "block";
        } else {
            goBack.style.display = "none";
        }

    })
</script>

</html>

KathyLJQ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端案例-19 pageXOffset的应用，侧边栏定位方式的切换

<!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>D.
复制链接

扫一扫

专栏目录