各位兄弟可能碰到定位的問題,特別是在博客或者微博上面也會見到這個效果,於是產品人員在策劃的時候就會要人家那種效果,,,而苦逼的我們需要去實現,實現實現。 。 。 。 。沒辦法,誰讓我們是攻城師呢,攻吧:效果圖如下,滾動條下拉的時候黑色的塊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:10psolx; ;} <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>