HTML原生JavaScript实现侧边栏效果（类似chrome插件书签侧边栏）

左右均可，div大小可以随意修改，js会自动适配
<!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>侧边栏</title>
</head>

<body>
    <style>
        #PNGsidebar {
            position: fixed;
            right: -34px;
            top: 50%;
            transform: translateY(-50%);
            width: 34px;
            height: 100px;
            background-color: #ccc;
            transition: right 0.3s ease-in-out;
        }

        /* 左 */
        /* #PNGsidebar {
            position: fixed;
            left: -34px;
            top: 50%;
            transform: translateY(-50%);
            width: 34px;
            height: 200px;
            background-color: #ccc;
            transition: left 0.3s ease-in-out;
        } */
    </style>
    <div id="PNGsidebar"></div>
    <script>
        document.addEventListener("mousemove", function (event) {
            // 获取鼠标在页面上的位置
            var x = event.clientX;
            var y = event.clientY;
            // 获取页面宽度和高度
            var w = window.innerWidth;
            var h = window.innerHeight;
            // 获取侧边栏元素和其位置信息
            var PNGsidebar = document.getElementById("PNGsidebar");
            var PNGsidebarRect = PNGsidebar.getBoundingClientRect();

            // 如果鼠标在侧边栏范围内，显示侧边栏
            if (
                x > w - PNGsidebarRect.width &&
                y > PNGsidebarRect.top &&
                y < PNGsidebarRect.top + PNGsidebarRect.height
            ) {
                PNGsidebar.style.right = "0";
            } else {
                PNGsidebar.style.right = "-34px";
            }
        });


        // 左
        // document.addEventListener("mousemove", function (event) {
        //     // 获取鼠标在页面上的位置
        //     var x = event.clientX;
        //     var y = event.clientY;
        //     // 获取页面宽度和高度
        //     var w = window.innerWidth;
        //     var h = window.innerHeight;
        //     // 获取侧边栏元素和其位置信息
        //     var PNGsidebar = document.getElementById("PNGsidebar");
        //     var PNGsidebarRect = PNGsidebar.getBoundingClientRect();

        //     // 如果鼠标在侧边栏范围内，显示侧边栏
        //     if (
        //         x < PNGsidebarRect.width &&
        //         y > PNGsidebarRect.top &&
        //         y < PNGsidebarRect.top + PNGsidebarRect.height
        //     ) {
        //         PNGsidebar.style.left = "0";
        //     } else {
        //         PNGsidebar.style.left = "-34px";
        //     }
        // });

    </script>
</body>

</html>
右边栏效果

发送评论编辑评论
右边栏效果

发送评论 编辑评论

发送评论编辑评论
