Question

在我的网站引导程序导航菜单中使用navbar-brand元素在Chrome中出现了一个奇怪的问题。

我们在标题部分显示了一个较大的网站徽标，并且导航栏的navbar-brand元素中的较小徽标默认显示为none。向下滚动页面时，我们会将导航栏粘贴到浏览器顶部并显示（）navbar-brand元素。当向上滚动时，小徽标应该隐藏（），因为大徽标随后可见。

这适用于IE和Firefox，没有问题，但只能部分在Chrome中使用。向下滚动时的效果与向上滚动时的隐藏效果一样，但正如您将看到的那样，为了显示徽标而移动的菜单项，在隐藏徽标时不会向后移动。如果您随后单击任何菜单条目，菜单条目将移回原来的位置。

代码本身就是这么简单所以我不相信这是错误的;

$(window).scroll(function () {
    if ($(this).scrollTop() > $('header').height()) {
        $('.navbar-brand').show();
    } else {
        $('.navbar-brand').hide();
    }
});

我在https://jsfiddle.net/96jqnu38/3/

处有一个简要说明问题

我似乎无法使用chrome来重新绘制/重新绘制菜单条目。

（Windows 8.1上的Chrome 43.0.2357.81）

Answer 1

好的，您的问题主要是css问题。您正在使用jquery函数，该函数为所选元素提供内联css属性。实际上，display：none通过.hide方法分配给元素将删除项目的高度和宽度。但是，您要隐藏子元素，并且需要隐藏容器元素以使css结构生效。

jquery的

    if ($(this).scrollTop() > $('header').height()) {
        $('.navbar-header').show();
    } else {
        $('.navbar-header').hide();
    }

CSS

.navbar-brand {
    position: relative;
    padding: 5px 15px;
}

使用Chrome中的显示/隐藏重绘/重绘问题

1 个答案:

jquery的

CSS