删除固定导航菜单弹跳 - jQuery？

Question

可以在以下位置找到我修改过的模板的工作演示 url:

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

我一直无法确定是什么导致了固定导航菜单令人讨厌的弹跳。如果向下滚动页面，菜单应该向上移动并在其顶部边框到达页面顶部时停止；然而，它实际上刚好移过页面顶部，然后又弹回来，导致恼人的弹跳。

如何消除这种反弹？我假设这可能是由用于查询菜单位置的 jQuery 代码引起的。就好像代码是在事后解决问题，而不是一开始就阻止它发生。

我已经从原始模板中删除了 header，因此菜单最初出现在顶部；然而，当用户第一次向下滚动页面时，菜单以类似的方式弹跳，所以缺陷在原始模板中，而不是由于我所做的任何更改。

我已将修改后的模板发布在下面的 url 以防下面的代码不够用。

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

好的，您已删除 header HTML。

现在您也可以删除 jQuery。因为要确保您的菜单导航位置始终固定在顶部，您可以仅通过 CSS 来做到这一点。下面是示例 CSS。

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

在你的情况下：在 ]]></b:skin> 行之前粘贴上面的 CSS 代码，然后保存你的模板

删除固定导航菜单弹跳 - jQuery？

Remove Fixed Navigation Menu Bounce - jQuery?

html

javascript

css

jquery

blogger