当鼠标滚动到指定位置,菜单固定在顶部
当鼠标滚动到指定位置,菜单固定在顶部属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了鼠标滚动的时候,开始导航菜单也是一起滚动的。
当滚动到一定的尺寸,比如到达顶端的时候就可以固定。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { margin:0px; padding:0px; } .wrapper { width: 1000px; height: 2000px; margin-left: auto; margin-right: auto; } .header { height: 150px; } #nav { padding: 10px; position: relative; top: 0; background: black; width: 1000px; } a { display: inline-block; margin: 0 10px; *display: inline; zoom: 1; color: white; } </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> </head> <body> <div class="wrapper"> <div class="header"></div> <div id="nav"> <a href="#">前端教程网一</a> <a href="#">前端教程网二</a> <a href="#">前端教程网三</a> <a href="#">前端教程网四</a> <a href="#">前端教程网五</a> </div> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function menuFixed(id) {},参数是要悬停玄素的id属性值。
(2).var obj = document.getElementById(id),获取对应的元素对象。
(3).var _getHeight = obj.offsetTop,获取元素距离body元素顶端的距离。
(4).window.onscroll = function () {
changePos(id, _getHeight);
},注册onscroll事件处理函数。
也就是当拖动滚动条的时候会调用changePos()方法。
(5).function changePos(id, height) {},第一个参数是元素的id属性值,第二个参数是元素距离body顶部的距离。
(6).var obj = document.getElementById(id),获取对应的元素对象。
(7).var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,获取向上滚动的尺寸。
(8).if (scrollTop < height) {
obj.style.position = 'relative';
} else {
obj.style.position = 'fixed';
},如果向上滚动的尺寸小于元素距离body顶端的尺寸,那么元素的定位方式为相对定位。
否则就是fixed定位方式。
二.相关阅读:
(1).offsetTop参阅JavaScript offsetTop一章节。
(2).onscroll事件参阅JavaScript scroll事件一章节。
(3).scrollTop参阅JavaScript scrollTop一章节。
当鼠标滚动到指定位置,菜单固定在顶部,这样的场景在实际项目中还是用的比较多的,关于当鼠标滚动到指定位置,菜单固定在顶部就介绍到这了。