Fixed element flicker issue when using mousewheel scroll

Question

I am trying to make the side bar become fixed at the top after scrolling to a certain point.

var sidebarTopPos = $('#sidebar').offset().top;
$(window).scroll(function(event) {
    if ($(window).scrollTop() >= sidebarTopPos) {
        $('#sidebar').css({
            position: 'fixed',
            top: 0
        });
    }
    else {
        $('#sidebar').css({
            position: 'relative'
        });
    }
});​

Take a look at this jsfiddle

The whole thing works fine when I drag the scrollbar down. However, when I try to scroll using the mousewheel, I see the annoying flicker when the side bar changes from "relative" to "fixed" I've tried so many things. Please help.

EDIT: Maybe I should have been more clear. The side bar "flickers" only when it crosses the top div

Answer 1

I was having the same issue, it seems to be a bug that occurs when there is too much going on for your browser to handle based on your computer GPU, Memory, CPU, etc..., I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

#sidebar {
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}