Jquery实现页面滚动时层智能浮动定位插件可以智能判断当滚动高度值大于顶部值就自动设置position: "fixed",top=0,这样层就一直处于顶部位置,反之刚设置回层原来的值,效果如下:
初始情况效果如下:
滚动高度值在于顶部值的情况如下:
主要代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>jQuery实现页面滚动时层智能浮动定位</title>
- <style type="text/css">
- *{ margin:0; padding:0;}
- body { font:12px/1.8 Arial; color:#666; height:2000px;}
- .float{width:200px; height:200px; border:1px solid #ffecb0; background-color:#000;position:absolute; right:10px; top:150px;}
- </style>
- <script type="text/javascript" src="jquery.min.js"></script>
- </head>
- <body>
- <div class="float" id="float"></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>
- </body>
- </html>
打包下载
如果您觉得本文的内容对您的学习有所帮助:
关键字:
Jquery实现页面滚动时层智能浮动定位插件