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

Question

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

我们在标题部分显示了一个较大的网站徽标，在导航栏的 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/ 有一个简化的 jsfiddle 来说明问题

我似乎不知道如何让 chrome 重绘/重绘菜单项回到原位。

（Windows 8.1 上的 Chrome 43.0.2357.81）

Answer 1

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

---

jquery

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

---

css

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