javascript - jQuery .hide() -- 向左滑动元素

Question

我正在将导航固定到页面顶部。我正在使用 Bootstrap(仅限 CSS)。我使用 jQuery 隐藏一个 Logo (img class .logo)并显示另一个 Logo (img class .logo-sm)，滚动。

除了一件事之外，一切基本上都有效。隐藏功能在主 Logo 淡出时将其向左滑动，但我希望它向上滑动。我很确定这不是 .hide() 函数的默认行为，但我不太了解 jQuery，所以我不知道如何更改它。

我构建了一个 JSFiddle 来演示该行为。由于某种原因，它不能一致地工作(它在本地工作)，但您可以在第一次向下滚动时看到 Logo 向左滑动。

<强> JSFiddle

脚本:

$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
    if ($(this).scrollTop() > 1){
        $(".logo").hide(100);
        $(".logo-sm").show(200);
    } else {
        $(".logo").show(100);
        $(".logo-sm").hide(200);
    }
});
});

Answer 1

发生这种情况是因为 .show() 正在应用 display: inline-block，而您需要的是 display: block。

要解决此问题，您需要找到将 header .logo css 显示值设置为内联的内容，并将其更改为阻止。从 jquery api 中，show 会将显示属性设置为最初设置的值。在本例中，它是内联 block ，这就是您的 Logo 向左移动的原因。