Safari中的粘边栏滚动问题

Question

I have a right sidebar that, when scrollled, has a "sticky" class added to it using jQuery. This works perfectly fine in Firefox and Chrome - however, in Safari, the sidebar gets pushed to the left and overlaps the main content. I'm sure this has to do with fixed positioning but I'm not sure of an answer to fix it.

You can see an example of the issue here when you scroll: http://tsb.catalystdigitalpartners.com/real-tennis-and-lawn-tennis-a-conversation-starter/

I have the following pertinent code:

CSS

.widgets-sticky{
    position: fixed !important;
    top: 60px !important;   
}

Javascript

if (windowPos > 60){
    $('#widgets-default').addClass('widgets-sticky');   
} else {
    $('#widgets-default').removeClass('widgets-sticky');    
};

Answer 1

As explained here: Why does Safari seem to have a problem with css position:fixed?

you need to give your sidebar a left/right position value when using position fixed. without a horizontal position value the browser doesnt know where to place the sidebar and so just has to guess.