前言
我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部
这是为了方便用户查看商品的各类信息或提交订单购物
也就是吸顶盒效果,那这个效果是怎么实现的?
原生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'; // 恢复原有的样式
}
}
}
如下是css
样式