固定滚动菜单

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        *{ margin:0; padding:0;}
        .ndiv{ width:200px; height:400px; border:1px solid #ccc;background: #f1f1f1;}
        .fix-div{ position:fixed; top:0px;}
    </style>
</head>
<body>
<section style="height: 700px;"></section>
<div id="mydiv" class="ndiv" >di222v</div>
<section style="height: 700px;"></section>
<script type="text/javascript">
    $.fn.fixedDiv = function(actCls){
        var pos = 0,
            that = $(this),
            topVal;
        if(that.length > 0){
            topVal = that.offset().top;
        }
        function fix(){
            pos = $(document).scrollTop();
            if (pos > topVal) {
                that.addClass(actCls);
                if (!window.XMLHttpRequest) {
                    that.css({
                        position: 'absolute',
                        top     : pos
                    });
                }
            } else {
                that.removeClass(actCls);
                if (!window.XMLHttpRequest) {
                    that.css({
                        position: 'static',
                        top     : 'auto'
                    });
                }
            }
        }
        fix();
        $(window).scroll(fix);
    }
    $('#mydiv').fixedDiv('fix-div');
</script>
</body>
</html>

posted @ 2014-06-06 22:17 豪情阅读(1284) 评论(1) 收藏举报

刷新页面返回顶部

固定滚动菜单

公告