各位兄弟可能碰到定位的问题,特别是在博客或者微博上面也会见到这个效果,于是产品人员在策划的时候就会要人家那种效果,,,而苦逼的我们需要去实现,实现实现。。。。。没办法,谁让我们是攻城师呢,攻吧: 效果图如下,滚动条下拉的时候黑色的块TOP为0;固定显示: 代码如下: 复制代码 代码如下: jQuery实现页面滚动时层智能浮动定位 <br>*{ margin:0; padding:0;} <br>.top{height:100px; background:#ccc;text-align:center; line-height:100px; font-size:40px;} <br>body { font:12px/1.8 Arial; color:#666; height:2000px;} <br>.float{width:200px; height:200px; border:1px solid #ffecb0; background-color:#000;position:absolute; right:10px; top:150px;} <br> 导航啊导航啊导航 <br>$.fn.smartFloat = function() { <br>var position = function(element) { <br>var top = element.position().top, pos = element.css("position"); <br>$(window).scroll(function() { <br>var scrolls = $(this).scrollTop(); <br>if (scrolls > top) { <br>if (window.XMLHttpRequest) { <br>element.css({ <br>position: "fixed", <br>top: 0 <br>}); <br>} else { <br>element.css({ <br>top: scrolls <br>}); <br>} <br>}else { <br>element.css({ <br>position: pos, <br>top: top <br>}); <br>} <br>}); <br>}; <br>return $(this).each(function() { <br>position($(this)); <br>}); <br>}; <br>//绑定 <br>$("#float").smartFloat(); <br>