jquery 悬浮

基础概念

jQuery 悬浮（Floating）通常指的是一个元素在页面上浮动显示，不随页面滚动而移动。这种效果常用于导航栏、工具提示、广告等场景，以提高用户体验。

类型

固定定位（Fixed Positioning）：元素相对于浏览器窗口固定位置，不随页面滚动而移动。
固定定位（Fixed Positioning）：元素相对于浏览器窗口固定位置，不随页面滚动而移动。
粘性定位（Sticky Positioning）：元素在滚动到特定位置时变为固定定位，直到另一个边界触发。
粘性定位（Sticky Positioning）：元素在滚动到特定位置时变为固定定位，直到另一个边界触发。

应用场景

导航栏：固定在页面顶部或底部，方便用户随时切换页面。
工具提示：当用户悬停在某个元素上时，显示额外的信息。
广告：固定在页面的某个位置，持续吸引用户的注意力。

示例代码

以下是一个简单的 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 Example</title>
    <style>
        .floating-nav {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: #f1f1f1;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="floating-nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div style="height: 2000px;">
        <!-- 页面内容 -->
    </div>
</body>
</html>