前端开发教程：底部上拉菜单导航隐藏功能实现

底部上拉菜单导航通常用于移动端网站，能够根据用户滚动或其他触发条件隐藏或显示。下面是实现这个功能的 HTML、CSS 和 JavaScript 代码。

功能实现

以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部菜单导航</title>
</head>
<style>
body {
    height: 1200px;
    margin: 0;
    font-family: Arial, sans-serif;
}

.content {
    padding: 20px;
    text-align: center;
}

.footer {
    position: fixed;
    bottom: -100px; /* 默认隐藏菜单 */
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    transition: bottom 0.3s ease;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer ul li {
    display: inline-block;
    margin: 10px;
}

.footer ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}
</style>
<body>
    <div class="content">
        <h1>欢迎访问我的网站</h1>
        <p>请滚动页面以查看底部菜单。</p>
    </div>

    <div class="footer" id="footerMenu">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>

    <script>
        const footer = document.getElementById('footerMenu');
        
        window.addEventListener('scroll', function() {
            if (window.scrollY > 100) {
                footer.style.bottom = '0';  // 显示底部菜单
            } else {
                footer.style.bottom = '-100px';  // 隐藏底部菜单
            }
        });
    </script>
</body>
</html>