Question

我将导航修复到页面顶部。我使用的是Bootstrap（仅限CSS）。我正在使用jQuery隐藏一个徽标（img类.logo）并在滚动时显示另一个徽标（img类.logo-sm）。

一切都基本有效，除了一件事。隐藏功能会在主徽标淡出时将主徽标滑动到左侧，但我希望它能够向上滑动。我非常确定这不是.hide()函数的默认行为，但我不太了解jQuery，所以我不确定如何更改它。

我构建了一个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。

要解决此问题，您需要找到将标题.logo css显示值设置为内联并将其更改为阻止的内容。从jquery api开始，show会将display属性设置为最初设置的内容。在这种情况下，它是内联块，这就是您的徽标向左移动的原因。

Answer 2

$.hide()仅将元素的display设置为none。它没有动画效果。这种行为可能是由CSS中的转换引起的。

如果您想使用jQuery为元素设置动画，可以使用.slideUp()和.slideDown()。

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

但是你的小提琴中还有其他一些东西正在引起一些奇怪的现象，所以这样做会更好。我建议不用jQuery动画，但用它来改变元素上的类并用CSS过渡处理动画。像这样：

$(document).ready(function() {
    // nav fixing
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1){
            $(".logo").removeClass("showing");
            $(".logo-sm").addClass("showing");
        } else {
            $(".logo-sm").removeClass("showing");
            $(".logo").addClass("showing");
        }
    });
});

然后使用转换为.showing类设置样式。

jQuery .hide（） - 向左滑动元素

2 个答案: