时间:2021-05-26
话不多说,请看代码:
<!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:///ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script></body></html>以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下:这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直
本文实例讲述了jQuery实现仿新浪微博浮动的消息提示框。分享给大家供大家参考。具体如下:这是一款jQuery实现的仿新浪微博新消息提示框效果,支持智能浮动定位
jQuery实现滚动条滚动到子元素位置(方便定位)关键代码如下所示: jQuery:$("#nurse").scrollTop($("#nurse").scr
动态吸底:开始时fixed在页面上,当页面滚动到距离底部一定距离的时fixed部分固定。这个是需要计算页面滚动距离的,如果使用Jquery或者原生js实现是非常
本文实例讲述了jquery实现网页的页面平滑滚动效果代码。分享给大家供大家参考,具体如下:这款网页页面平滑滚动jquery代码,点击链接会让网页平滑滚动到链接对