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

【问题标题】：Remove Fixed Navigation Menu Bounce - jQuery?删除固定导航菜单弹跳 - jQuery？
【发布时间】：2017-11-21 03:29:46
【问题描述】：

可以在以下网址找到我修改过的模板的工作演示：

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

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

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

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

我已经把修改后的模板贴在下面的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();
            }
        });
    }

});

【问题讨论】：

你想要什么？您要删除此导航菜单还是要将此导航固定在顶部？
我希望摆脱页面第一次滚动时出现的烦人的菜单弹跳。您可以通过向上滚动在原始演示中看到这一点 - 菜单似乎刚刚超过页面顶部，然后弹回。
对不起，我的英语有点听不懂。您的意思是要删除固定菜单还是使其正常（未固定）。或删除菜单和标题之间的全部内容？我可以轻松做到这一点。你想做哪一个？
我想删除标题。我想将菜单固定在页面顶部。
在下面查看我的答案。我在你的模板上试过了

标签： javascript jquery html css blogger

【解决方案1】：

好的，您已经删除了标头 HTML。

现在您还可以删除该 jQuery。因为要确保您的菜单导航位置始终固定在顶部，您只需使用 CSS 即可。示例 CSS 如下。

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

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

【讨论】：

感谢您的帮助！