I am trying to have an advertisement block/div that will be hald way down the page, once you scroll do the page to this point it will stick to the top.

Here is a demo of what I am trying to do and the code I am using to do it with...

http://jsfiddle.net/jasondavis/6vpA7/3/embedded/result/

In the demo it works perfectly how I am wanting it to be, however when I implement it on my live site, http://goo.gl/zuaZx it works but when you scroll down the div flickers in and out of view on each scroll or down key press. On my site to see the problem live it is the blokc on the right sidebar that says "Recommended Books"

Here is the code I am using...

$(document).ready( function() {

    $(window).scroll( function() {
        if ($(window).scrollTop() > $('#social-container').offset().top)
            $('#social').addClass('floating');
        else
            $('#social').removeClass('floating');
    } );

} );?

css

#social.floating {
    position: fixed;
    top: 0;
}?

My demo jsfiddle where it works correctly http://jsfiddle.net/jasondavis/6vpA7/3/

The only thing different on my live site is the div/id name is different. As you can see it is somewhat working on my live site except the flickering in and out of view as you scroll down the page.

Anyone have any ideas why this would happen on my live site and not on my jsfiddle demo?