Remove Fixed Navigation Menu Bounce - jQuery?

Question

A working demo of a template I've modified can be found at the following url:

https://newbloggerthemes.com/base-wp-blogger-template/demo/

I've been unable to determine what is causing a annoying bounce of the fixed navigation menu. If you scroll the page downward the menu should move upward and stop when its top border reaches the top of the page; however, it actually moves just past the top of the page and then snaps back, causing a annoying bounce.

How do I get rid of this bounce? I am assuming that this might be caused by the jQuery code used to query the menu's position. Its as if the code is fixing the issue afterward as opposed to preventing it from happening in the first place.

I've removed the header from the original template so that the menu initially appears at the top; however, when the user first scrolls the page downward the menu bounces in a similar fashion so the defect is in the original template and not due to any changes I've made.

I've posted the modified template at the url below in case the code below is not enough.

https://1drv.ms/t/s!AnHSMVz7JJ2Ocf9KoYS67t_6ZqI

jQuery(document).ready(function($) {
    var $filter = $('.main-navigationbwrap');
    var $filterSpacer = $('<div />', {
        "class": "filter-drop-spacer",
        "height": $filter.outerHeight()
    });


    if ($filter.size())
    {
        $(window).scroll(function ()
        {
            if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
            {
                $filter.before($filterSpacer);
                $filter.addClass("fix");
            }
            else if ($filter.hasClass('fix')  && $(window).scrollTop() < $filterSpacer.offset().top)
            {
                $filter.removeClass("fix");
                $filterSpacer.remove();
            }
        });
    }

});

Answer 1

Okay, you're done removed the header HTML.

Now you can also removed that jQuery. Becuase to make sure your menu navigation position always fixed at the top, you can do that just by CSS only. Example CSS is below.

.site-headerbwrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

in you case: paste CSS code above before ]]></b:skin> line and then Save your Template