jquery 滚动页面后出现菜单

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。滚动页面后出现菜单通常涉及到页面滚动事件的处理，以及菜单的显示和隐藏逻辑。

类型

滚动页面后出现菜单通常有以下几种类型：

固定菜单：菜单固定在页面顶部或底部，无论页面如何滚动，菜单始终可见。
滚动触发菜单：当页面滚动到某个特定位置时，菜单会显示或隐藏。
粘性菜单：菜单在滚动到某个位置时固定在页面顶部，直到滚动到另一个位置时消失。

应用场景

这种功能常见于网站的导航栏、侧边栏等，用于提升用户体验，使用户可以随时访问主要功能或信息。

示例代码

以下是一个简单的示例，展示如何在页面滚动时显示和隐藏菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Menu Example</title>
    <style>
        body {
            height: 2000px;
        }
        #menu {
            display: none;
            position: fixed;
            top: 10px;
            left: 10px;
            background-color: #f1f1f1;
            padding: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="menu">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </div>
    <div id="content">
        <!-- 页面内容 -->
    </div>

    <script>
        $(document).ready(function() {
            $(window).scroll(function() {
                if ($(this).scrollTop() > 100) {
                    $('#menu').fadeIn();
                } else {
                    $('#menu').fadeOut();
                }
            });
        });
    </script>
</body>
</html>