仿新版淘宝右侧板块随屏幕滚动效果

jQuery新手，自己写的效果，不喜勿喷

    <style>
    *{margin: 0; padding: 0;}
    .w{margin: 0 auto;}
    .wrapper{width: 100%; height: 2000px; background: #eee;}
    .wrapper div{float: left;}
    </style>


    <div class="wrapper">
        <div id="block1" style="width:60%; height:1500px; background:#abc;"></div>
        <div id="block2" style="width:40%; height:1500px; background:#f7f7f7;">
            <div id="yellow" style="height:500px; width:500px; background:yellow;"></div>
            <div id="red" style="height:500px; width:500px; background:red;"></div>
        </div>
        <div style="width:100%; height:500px; background:black;">nihao</div>
    </div>
    
    <script>
    $(function(){
        $block1 = $('#block1').height();
        $block2 = $('#block1').height();
        $yellow = $('#yellow').height();
        $red = $('#red').height();
        setInterval(function(){$window = $(window).height();},500);  //实时更新窗体高度

        $(document).scroll(function(){
            if ($(document).scrollTop() < ($yellow+$red-$window)) {
                $('#red').css('position','static').css('top','auto').css('bottom','0')
            }else if ($(document).scrollTop() >= ($yellow+$red-$window) && $(document).scrollTop() < ($block1-$window)){
                $('#red').css('position','fixed').css('top','auto').css('bottom','0');
            }else if ($(document).scrollTop() >= ($block1-$window)) {
                $('#red').css('position','absolute').css('top','1000px').css('bottom','0');
            };
        });
    })    
    </script>