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

最新推荐文章于 2025-05-23 14:15:04 发布

原创

最新推荐文章于 2025-05-23 14:15:04 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #前端 #html #css3

本文介绍了如何使用原生JavaScript实现网页滚动时导航菜单始终保持在顶部的吸顶盒效果。通过监听滚动事件和利用CSS position样式，当内容超出导航菜单可视范围时，将导航菜单置顶。

前言

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

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

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

原生Js

如下是原生js

// 初始化函数
function init() {
    // 获取顶部元素的DOM
    var wrap = document.getElementById("wrap");
    var scrollTop = 0;  // 初始化为顶部
    // 监听页面滚动事件
    window.onscroll = function() {
        // 获取当前的滚动距离
        scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
     &