jQuery实现页面滚动时智能浮动定位

2019-11-19 18:05:01

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：Javascript 高性能之递归，迭代，查表法详解及实例

下一篇：jQuery实现滚动条滚动到子元素位置（方便定位）