jquery右侧跟随悬浮固定窗口

基础概念

jQuery右侧跟随悬浮固定窗口是一种常见的网页设计技术，它使得一个窗口（通常包含一些功能按钮或信息）能够随着用户滚动页面而固定在页面的右侧。这种设计可以提高用户体验，使用户在不离开当前页面的情况下，方便地访问一些常用功能。

类型

固定位置：窗口始终固定在页面的某个位置。
跟随滚动：窗口随着用户滚动页面而移动，但保持在屏幕的固定位置。

应用场景

购物车：在电商网站中，悬浮窗口可以显示购物车中的商品。
用户信息：显示用户的登录状态、头像等信息。
功能按钮：如分享、收藏、评论等按钮。

示例代码

以下是一个简单的jQuery示例，展示如何实现一个右侧跟随悬浮固定窗口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery右侧跟随悬浮固定窗口</title>
    <style>
        #floating-window {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 200px;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="floating-window">
        <h3>悬浮窗口</h3>
        <p>这是一个右侧跟随悬浮固定窗口。</p>
        <button>点击我</button>
    </div>
    <div style="height: 2000px;">
        <p>滚动页面查看悬浮窗口效果。</p>
    </div>

    <script>
        $(document).ready(function() {
            var $window = $('#floating-window');
            var initialTop = $window.offset().top;

            $(window).scroll(function() {
                var scrollTop = $(this).scrollTop();
                if (scrollTop > initialTop) {
                    $window.css({
                        position: 'fixed',
                        top: '20px'
                    });
                } else {
                    $window.css({
                        position: 'absolute',
                        top: initialTop + 'px'
                    });
                }
            });
        });
    </script>
</body>
</html>