jquery导航菜单栏固定悬浮顶部实现效果
时间:6年前 阅读:5054
今天做了个固定定位的效果。比如对导航需要进行固定定位效果:当没有滚动到导航下面,导航正常显示。当滚动到导航下面,导航就固定到顶部。
一、css部分:
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
二、这个效果使用了jquery的方法实现,具体思路为:
1、首先获得已经滚动上去的高度
2、让导航条固定定位 如果t>139加f这个Class,让它有定位
3、如果小于或等于139,取消f这个Class
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } img{ display: block; margin: 0 auto; } img#menu.f{ position: fixed; left: 50%; margin-left: -602px; top: 0; } </style> <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ // 给浏览器加滚动条事件 $(window).scroll(function(){ // 获得已经滚动上去的高度 document页面文档区域 window也可以 var t = $(document).scrollTop(); document.title = t; if (t>139) { // 让导航条固定定位 fixed:固定的 向左留50%(一半的距离有居右的效果),然后这个图片是1204px宽度,图片在右,向左是负的()图片一半602px,达到居中效果 // $('#menu').css({'position':'fixed','top':'0','left':'50%','margin-left':'-602px'}) // 让导航条固定定位 如果t>139加f这个Class,让它有定位 $('#menu').addClass('f'); }else{ // 如果小于或等于139,取消f这个Class $('#menu').removeClass('f'); } }) }) </script> </head> <body> <img src="https://www.qiquanji.com/data/img/dmj/201903211553156320441253.jpg" alt="" id="menu" /> <img src="https://www.qiquanji.com/data/img/dmj/201903211553156373840105.jpg" alt="" /> <img src="https://www.qiquanji.com/data/img/dmj/201903211553156398239665.jpg" alt="" /> </body> </html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论