Question

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

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

我一直无法确定导致固定导航菜单恼人弹跳的原因。如果向下滚动页面，菜单应向上移动，并在其顶部边框到达页面顶部时停止;然而，它实际上只是移动到页面的顶部，然后快速向后移动，导致恼人的反弹。

如何摆脱这种反弹？我假设这可能是由用于查询菜单位置的jQuery代码引起的。它好像代码后来解决问题而不是防止它首先发生。

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

我已将修改过的模板发布在下面的网址中，以防下面的代码不足。

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

好的，您已完成删除标题HTML。

现在你也可以删除那个jQuery。因为确保您的菜单导航位置始终固定在顶部，您只能通过CSS执行此操作。 CSS示例如下。

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

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

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

1 个答案: