jquery悬浮图标

基础概念

jQuery悬浮图标（Floating Icon）是一种网页设计元素，通常用于在页面滚动时保持图标在屏幕上的固定位置。这种设计可以提高用户体验，使用户能够快速访问某些功能或信息。

类型

固定位置悬浮图标：图标始终固定在屏幕的某个位置，如右下角。
跟随滚动悬浮图标：图标会随着页面滚动而移动，但始终保持与页面内容的相对位置。

应用场景

导航：在长页面中，悬浮图标可以用来快速导航到页面的不同部分。
通知：显示未读消息或通知数量。
工具栏：提供快速访问常用工具的功能。

示例代码

以下是一个简单的jQuery悬浮图标的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Floating Icon</title>
    <style>
        #floating-icon {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="floating-icon">+</div>
    <div style="height: 2000px;">
        <!-- 页面内容 -->
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#floating-icon').click(function() {
                alert('悬浮图标被点击！');
            });
        });
    </script>
</body>
</html>