scrolling sidebar in jquery

<div id="sidebar">
              <ul>
                <li><a href="#">sidebar</a></li>
                <li><a href="#">sidebar</a></li>
                <li><a href="#">sidebar</a></li>
            </ul>
        </div>
<style type="text/css">
        #sidebar ul { background: #eee; padding: 10px; }
        li { margin: 0 0 0 20px; }
        #sidebar { width: 190px; float: right; }
 </style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type="text/javascript">
        $(function() {
            var offset = $("#sidebar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>