☀【滚动条】动画，固定

手机支付宝-支付宝知托付！
http://qianbao.alipay.com/index.htm
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {margin: 0;padding: 0;}
        .head {height: 500px;}
        .box {height: 500px;}
        .box:nth-child(even) {background: gray;}
        .menu {width: 100%;height: 110px;background: olive;}
        .anim-fixed {position: fixed;top: 0;left: 0;}
    </style>
</head>
<body>
    <div class="head">head</div>
    <div class="menu">menu</div>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <script src="jquery-1.6.4.js"></script>
    <script>
        var $window = $(window)
        var windowWidth = $window.width()
        var windowHeight = $window.height()

        var headElem = $('.head')
        function resetTopHeight() {
            var topHeight = $window.height() - 110
            if (topHeight > 500) {
                headElem.css({
                    'height': topHeight + 'px'
                })
            }
        }
        resetTopHeight()

        $window.resize(function() {
            windowWidth = $window.width()
            windowHeight = $window.height()
            resetTopHeight()
        })

        setTimeout(function() {
            $window.scrollTop(0)
        }, 0)

        headElem.addClass('anim-head')

        function scrollAnim() {
            if ($window.scrollTop() > 140) {
                $('.box1').addClass('anim-box1')
            }
            if ($window.scrollTop() > 640) {
                $('.box2').addClass('anim-box2')
            }
            if ($window.scrollTop() > windowHeight) {
                $('.menu').addClass('anim-fixed')
            } else {
                $('.menu').removeClass('anim-fixed')
            }
        }
        scrollAnim()
        $window.scroll(function() {
            scrollAnim()
        })
    </script>
</body>
</html>