Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果
2023-06-13 09:17:21 时间
前言
我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部
这是为了方便用户查看商品的各类信息或提交订单购物
也就是吸顶盒效果,那这个效果是怎么实现的?
原生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
样式
* {
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;
}
如下是html
代码
<body style="height:1000px">
<div id="wrap" class="wrap">
<div class="hd"></div>
<div class="bd"></div>
</div>
</body>
总结
要想实现一个层始终固定在屏幕的顶部或底部,就不得不使用css的positon样式,其次,在来控制网页是不是需要把导航菜单置顶,因为当网页内容的浏览没有滑出导航菜单的可见范围时,是没有必要把导航菜单置顶的,因此,在代码中就需要监听网页的滚动跳滑动事件
当超过一定的范围以后,才有必要为导航菜单设置固定的position样式
其实也有另外一种解决办法,就是导航栏始终是固定在顶部,当拉动滚动条时到一定的范围,就改变背景色,也是一种解决办法
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- JS跳转代码_js中跳转页面路径
- 用JS获取地址栏url参数的方法_js的url是啥
- qq登录钓鱼php网页,PHP+JS模仿登录钓鱼「建议收藏」
- JS面试题-js新增基本数据类型BigInt
- 客服系统切换中英文多语言 - 使用js更新URL参数来实现切换 【唯一客服】网站网页客服源码教程
- 原生 JS 实现 HTML 转 Markdown ,html2md.js
- get两个js小技能——JS截取视频第一帧&图片转Base64
- 使用Redis和JS优化网页性能(redisjs)
- JS网页彩蛋实现代码
- js禁止选择功能实现代码(兼容IE/Firefox)
- js实现addClass,removeClass,hasClass的函数代码
- JS实现网页百叶窗效果
- 倒记时60刷新网页的js代码
- js获取网页可见区域、正文以及屏幕分辨率的高度
- Windows下使用apache模块实现合并多个js、css提高网页加载速度