jQuery实现页面滚动时智能浮动定位
本文主要介绍了jQuery实现页面滚动时智能浮动定位的方法。附上完整代码,具有一定的参考价值,下面一起来看下吧
话不多说,请看代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | < !DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现页面滚动时层智能浮动定位_前端开发</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font: 12px/1.8 Arial; color: #666; } h1.tit-h1 { font-size: 38px; text-align: center; margin: 30px 0 15px; color: #f60; } .wrap { border: 1px dashed #ccc; background: #f8f8f8; padding: 20px; } .demo { height: 1500px; } .float { width: 80px; padding: 10px; border: 1px solid #ffecb0; background-color: #fffee0; -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2); box-shadow: 1px 1px 2px rgba(0,0,0,.2); position: absolute; right: 10%; top: 131px; } </style> <script type="text/javascript" src="/js/jquery.min.js"></script> </head> <body> <h1 class="tit-h1">jQuery实现页面滚动时层智能浮动定位_前端开发</h1> <div class="wrap"> <div class="demo"></div> <div class="float" id="float">我在这里等你噢!</div> </div> <script type="text/javascript"> $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: "absolute", top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; //绑定 $("#float").smartFloat(); </script> </body> </html> |
注意顺序js需要放在浮动内容后面
来源:邦林织梦(微信/QQ号:909912499),欢迎分享本文,转载请保留出处!部分内容来自网络,如有侵权请联系删除处理!
相关信息
本站提供代码修改,dedecms,WordPress仿站二次开发 / PHP网站建设以及SEO优化等网络营销推广等服务。
如有需要请加QQ: 909912499