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

Question

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

我们在标题部分显示了一个较大的站点 Logo ，在导航栏的 navbar-brand 元素中显示了一个较小的 Logo ，默认情况下不显示。当向下滚动页面时，我们将导航栏附加到浏览器的顶部并显示()导航栏品牌元素。向上滚动时，小 Logo 应隐藏()，因为大 Logo 随后可见。

这在 IE 和 Firefox 中没有问题，但在 Chrome 中只能部分工作。向下滚动时显示与向上滚动时隐藏一样，但正如您将看到的那样，为显示 Logo 而移动的菜单项在隐藏 Logo 时不会移回。如果您随后单击任何菜单项，菜单项将移回它们应在的位置。

代码本身非常简单，所以我不认为这是错误的；

$(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 结构生效。

---

j查询

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

---

CSS

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