Javascript的粘边栏问题

Question

I am trying to implement a sticky sidebar that always sits at the top of the window as the user scrolls down the page.

I have it sticking to the top at the correct time, but for some reason it no longer floats left... will anybody please let me know what I can do to get it to stay in the same position when sticking?

My site is here . Thanks in advance!

<script type="text/javascript">
$(function(){ // document ready

    if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
        var stickyTop = $('.sticky').offset().top; // returns number 
        $(window).scroll(function(){ // scroll event
            var windowTop = $(window).scrollTop(); // returns number 
            if (stickyTop < windowTop){
                $('.sticky').css( { position:'fixed', top: 0, marginLeft: "30px" } );
            }
            else {
                $('.sticky').css('position','static');
            }
        });
    }

});
</script>

Answer 1

Don't invent the wheel. Just get something like this plug-in and enjoy.

Answer 2

You don't seem to be telling it to be at the left side of the screen.

Try changing this line to:

$('.sticky').css( { position:'fixed', top: 0, left:0, marginLeft: "30px" }