吸顶菜单

最新推荐文章于 2025-02-15 17:14:08 发布

斗弟

最新推荐文章于 2025-02-15 17:14:08 发布

阅读量518

点赞数

分类专栏：案例源码文章标签：网页吸顶菜单

本文链接：https://blog.youkuaiyun.com/L_Lintellect/article/details/98480299

版权

案例源码专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的吸顶菜单实现方案，通过HTML、CSS和JavaScript，当页面滚动到一定位置时，菜单将固定在顶部，提供了源代码供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

吸顶菜单，现在的pc端网页也是很常用的一个功能，干货来了，直接上源码，可以做得更完美的，原本一套样式，吸顶时，再给一套样式，可自由发挥。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>吸顶菜单</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 2000px;
            background: #ccc;
        }

        #head {
            width: 100%;
            height: 200px;
            background: lightblue;
        }

        #menu {
            width: 100%;
            height: 100px;
            background: lightcoral;
        }

        #menu1 {
            width: 100%;
            height: 100px;
        }

        #main1 {
            height: 200px;
            background: orange;
        }

        #main2 {
            height: 200px;
            background: #58bc58;
        }

        .fix {
            position: fixed;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="head"></div>
    <!-- fix定位会脱离文档流，需要用个盒子装着，始终都有处于文档流中，
        不然固定的一瞬间会出现bug -->
    <div id="menu1">
        <div id="menu"></div>
    </div>
    <div id="main1">
        <h2>main1</h2>
    </div>
    <div id="main2">
        <h2>main2</h2>
    </div>
</body>
<script>
    (function () {

        var menu = document.getElementById('menu');
        var main1 = document.getElementById('main1');
        var iTop = menu.offsetTop;
        /*
            需求：吸顶菜单
                * 滚动滑轮，获取滚动距离
                * 如果超过了临界值，就给菜单添加fixed，吸在顶部
        */
        window.onscroll = function () {
            var scrollTop = window.scrollY;
            if (scrollTop >= iTop) {
                // console.log('到达临界点了');
                menu.className = 'fix';
            } else {
                menu.className = '';
            }
        }
    })();
</script>

</html>