关于导航菜单吸顶效果的简述

吸顶效果的展示

访问百度新闻 我们可以看到 ，在将滑轮向下滚动到一定位置以后，导航栏会吸附在顶部
那么它究竟是如何实现的呢？ 不妨实现一下！

明确思路

正式写代码前，还是先来明确一下思路

1、在合适的时候，改变nav的样式，让它吸顶;
2、在合适的时候，改变回nav的样式，让它还原;

那么什么时候才算合适呢？？？
简单做的话，先实现手动计算获取 ， 后期再有需求可以改为动态获取。

制作

1、先写 个简单的 页面布局：

<div class="top"></div>
    <div class="banner"></div>
    <div class="nav" id="nav"></div>
    <div class="nav-back" id="nav_back"></div>
    <div class="content">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>   
 </div>

2、添加一个直男配色的样式

<style>
        *{margin: 0;padding: 0;}
        .top{
            height: 80px;
            background: red;
        }
        .banner{
            margin: 10px auto;
            height: 400px;
            width: 1130px;
            background: yellowgreen;
        }
        .nav{
            height: 100px;
            background: #f99;
        }
        .nav-back{
            position: relative;
            height: 100px;
            z-index: -1;
            display: none;
        }
        .content{
            height: 3000px;
            background: skyblue;
            font-size: 20px;
        }
    </style>

看下效果
还算可以， 没那么辣眼睛~

--------------------------------------------------------------------分割线-----------------------------------------------------------------------
接下来就写一下逻辑

```javascript
// 获取滚动的高度; 
        var nav_height = 500;
        // nav的初始状态
        var nav_status = "normal";
        window.onscroll = function(){
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            if(scrollTop >= nav_height && nav_status === "normal"){
                console.log("此时nav需要进行固定定位");
                // 避免重复判断，此时改变状态;
                nav_status = "fixed";
                nav.style.cssText = "position:fixed;width:100%;top:0;";
                nav.innerHTML = "我是吸顶之后的nav";
                // nav_back 是在nav吸顶后进行填补;
                nav_back.style.cssText = "display:block;"
            }
            if(scrollTop < nav_height && nav_status === "fixed"){
                console.log("此时nav需要还原");
                nav_status = "normal";
                nav.style.cssText = "";
                nav.innerHTML = "我nav又回来了";
                nav_back.style.cssText = "display:none;"
            }
        }

为了解决一个小的布局bug ， 加入 nav_back 用来在 需要吸顶效果实现的时候 ，填补 nav 吸顶带来的一个空白

看一下 效果如何~~

吸顶效果顺利实现，再看看返回效果如何~~

总的来说 ， 还阔以~

总结一下：
1、吸顶效果用途比较广泛，对用户体验有着一定程度上的优化;
2、对吸顶效果如何触发，以及怎样在后期进行动态获取数据加以判断，仍是改进的一部分;
3、吸顶元素脱离文档的时候，需要多余的元素进行填补空白；同样在恢复的时候，也需要让这个填补空白的元素隐藏;

标签：菜单,back,height,简述,nav,world,吸顶,hello
来源： https://blog.csdn.net/qq_40606705/article/details/104896461