Floating menu, jumps while scrolling

Question

Floating menu on top jumps a bit while begin to scroll. How to keep it fixed to top all the time ?

On some pages when only dark grey footer is below the screen (or if browser window is resized) while trying to scroll whole page jump/blinks.

my website

Please help :)

Answer 1

At the bottom of your page source is a JavaScript section with the following code:

function relocate_persistent_header() {
    var header_bar = jQuery("#menu-wrapper");
    if(header_bar.hasClass("floater-bar")) {
        header_bar.css("left", ((jQuery(window).width() / 2) - header_bar.width() / 2) + "px");
    }else{
        header_bar.css("left", "");
    }
}

jQuery(document).ready(function($)
{   
    var $header_top_pos = $("#menu-wrapper").offset().top + 20;   
    function ozy_check_floating_position() {
        if ($(window).scrollTop() > $header_top_pos) {
            $("#menu-wrapper").addClass("floater-bar");
        } else {
            $("#menu-wrapper").removeClass("floater-bar");
        }
        relocate_persistent_header();
    }
    $(window).scroll(function() { ozy_check_floating_position(); });

    ozy_check_floating_position();
});

jQuery(window).resize(function()
{
    relocate_persistent_header();
});

This is the source of the problem. It would be much easier for menu-wrapper to always have the CSS class floater-bar and do away with adding or removing it.

Using Firebug I gave menu-wrapper's style attribute all the CSS associated with floater-bar (so that removing floater-bar would have no effect) and the "jumping" problem went away. To actually use this solution, remove:

if ($(window).scrollTop() > $header_top_pos) {
    $("#menu-wrapper").addClass("floater-bar");
} else {
    $("#menu-wrapper").removeClass("floater-bar");
}

From the website and add the class floater-bar to menu-wrapper in the actual HTML.