# Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

# 快速导航

# 前言

我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部

这是为了方便用户查看商品的各类信息或提交订单购物

也就是吸顶盒效果,那这个效果是怎么实现的?

# 原生js

如下是原生js

// 初始化函数
function init() {
    // 获取顶部元素的DOM
    var wrap = document.getElementById("wrap");
    var scrollTop = 0;  // 初始化为顶部
    // 监听页面滚动事件
    window.onscroll = function() {
        // 获取当前的滚动距离
        scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        // 当超过150像素时,把顶部的导航菜单设置固定
        if(scrollTop > 150) {
            wrap.className = "fix-top";  // 固定顶部的样式
        }else {
            wrap.className = 'wrap';  // 恢复原有的样式
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如下是css样式

* {
    margin:0;
    padding:0;
}

.wrap {
    width: 100%;
}
.hd {
    width: 980px;
    height: 150px;
    margin: 0 auto;
    background: red;
}

.bd {
    width:980px;
    height: 40px;
    margin: 0 auto;
    background: blue;
}

.fix-top {
    position:fixed;
    width: 100%;
}

.fix-top .hd {
    display:none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

如下是html代码

<body style="height:1000px">
    <div id="wrap" class="wrap">
     <div class="hd"></div>
     <div class="bd"></div>
    </div>
</body>

1
2
3
4
5
6
7

# 总结

要想实现一个层始终固定在屏幕的顶部或底部,就不得不使用css的positon样式,其次,在来控制网页是不是需要把导航菜单置顶,因为当网页内容的浏览没有滑出导航菜单的可见范围时,是没有必要把导航菜单置顶的,因此,在代码中就需要监听网页的滚动跳滑动事件

当超过一定的范围以后,才有必要为导航菜单设置固定的position样式

其实也有另外一种解决办法,就是导航栏始终是固定在顶部,当拉动滚动条时到一定的范围,就改变背景色,也是一种解决办法

白色

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐