話不多說，請看代碼：
<!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="../..content/js/jquery-1.4.4.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: pos, top: top }); } }); }; return $(this).each(function () { position($(this)); }); }; //綁定 $("#float").smartFloat(); </script> </div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-20541395-2']); _gaq.push(['_trackPageview']); (function () { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script></body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
