JS实现当鼠标滚动到页面指定位置，菜单固定在顶部
时间:2020-06-05 17:07 来源:蚂蚁部落
特效简介
本章节分享一段代码实例，它实现了鼠标滚动的时候，开始导航菜单也是一起滚动的。
当滚动到一定的尺寸，比如到达顶端的时候就可以固定。
示例代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="蚂蚁部落" />
<title>JS实现当鼠标滚动到页面指 定位置，菜单固定在顶部</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.wrapper {
width: 1000px;
height: 3000px;
margin-left: auto;
margin-right: auto;
}
.header {
height: 150px;
}
#nav {
padding: 10px;
position: relative;
top: 0;
background: black;
width: 1000px;
}
#nav a {
display: inline-block;
margin: 0 10px;
*display: inline;
zoom: 1;
color: white;
text-decoration:none;
}
</style>
<script>
function menuFixed(id) {
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function () {
changePos(id, _getHeight);
}
}
function changePos(id, height) {
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop < height) {
obj.style.position = 'relative';
} else {
obj.style.position = 'fixed';
}
}
window.onload = function () {
menuFixed('nav');
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="wrapper">
<div class="header"></div>
<div id="nav">
<a href="http://www.zzscz.com">网 站 首 页</a>
<a href="#">网 页 特 效</a>
<a href="#">织 梦 模 板</a>
<a href="#">织 梦 插 件</a>
<a href="#">织 梦 教 程</a>
<a href="#">滚动鼠标查看预览效果</a>
</div>
</div>
</body>
</html>
|
0
下载说明
· 本站下载链接均为网盘下载（百度网盘 & 微云网盘）；
· 推荐使用第三方专业下载工具下载本站软件，使用 WinRAR v3.10 以上版本解压本站软件；
· 如果这个软件总是不能下载的请点击报告错误,谢谢合作!!
· 下载本站资源，如果服务器暂不能下载请过一段时间重试！
· 本站提供的一些商业软件是供学习研究之用，如用于商业用途，请购买正版。