前端屌丝

导航

侧边滚动菜单Demo 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset=utf-8>
    <script src="http://web.yi6cdn.com/jquery.js"></script>
    <style>
        *{padding:0;margin:0}
        body{height:2000px}
        .sidebar{width:100px;height:200px;background:gray;position:absolute;top:100px;left:20px}
    </style>
</head>
<body>
<div class="sidebar"></div>

<script>
    $(function() {
        function scrollbar(target,paddingTop){
            var win=$(window),sidebar=$(target);
            var offset = sidebar.offset();
            var topPadding = paddingTop;

            var timeout=null;

            win.scroll(function() {

                clearTimeout(timeout);

                timeout=setTimeout(function(){
                    if (win.scrollTop() > offset.top) {
                        sidebar.stop().animate({
                            marginTop: win.scrollTop() - offset.top + topPadding
                        });
                    } else {
                        sidebar.stop().animate({
                            marginTop: 0
                        });
                    };
                },250)

            });
        }

        scrollbar('.sidebar',100)
    });
</script>
</body>
</html>

　　

posted on 2013-10-31 14:18  前端屌丝  阅读(350)  评论(0)    收藏  举报