$(document).ready(function () { $.fn.smartFloat = function () { var position = function (element) { var tops = $(".con_title").position().top; var top = element.position().top-tops; var left = element.position().left; //当前元素对象element距离浏览器上边缘的位置 var pos = element.css("position"); $(window).scroll(function () { //侦听滚动事件 var scrolls = $(this).scrollTop(); if (scrolls > top) { //如果滚动到页面距离超出了当前元素element的相对页面顶部的高度 if (window.XMLHttpRequest) { //如果不是ie6 element.css({ //设置CSS position: "fixed", //固定定位 top: top, //距离页面顶部为top left: left }).addClass("shadow"); //加上阴影样式 } else { //如果是ie6 element.css({ top: scrolls //与页面顶部距离 }); } } else { element.css({ //如果当前元素element未滚动到浏览器边缘，则使用默认样式 position: pos, top: top }).removeClass("shadow"); //移除阴影样式 } }); }; return $(this).each(function () { position($(this)); }); }; }); $(function () { $(".con_title").smartFloat(); $(".con_right").smartFloat(); });
html页：
<!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> <title>無題のページ</title> <link href="css/Nav.css" rel="stylesheet" type="text/css" /> <script src="Lib/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="Lib/jquery.query.js" type="text/javascript"></script> </head> <body> <div class="content"> <div class="nav"> <ul> <li><a href="#">宝贝详情</a></li> <li class="cur"><a href="#">评价详情（123）</a></li> <li><a href="#">成交记录（68件）</a></li> </ul> </div> <div class="nav_left"></div> <div class="nav_right"></div> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html> <script src="Lib/Nav.js" type="text/javascript"></script>