浮动导航条的实现

$(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>