jquery导航菜单栏固定悬浮顶部实现效果
今天做了个固定定位的效果。比如对导航需要进行固定定位效果：当没有滚动到导航下面，导航正常显示。当滚动到导航下面，导航就固定到顶部。
一、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/mip/data/img/dmj/201903211553156320441253.jpg" alt="" id="menu" /> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903211553156373840105.jpg" alt="" /> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903211553156398239665.jpg" alt="" /> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知