Javascript 使用jQuery添加和删除类时淡入标题

我正在设计一个导航，在用户向下滚动页面一点后，背景栏就会出现。当它们滚动回顶部时，条（背景色）消失。我正在使用下面的说明进行操作：

它的工作原理很好，但现在我想添加淡入淡出滚动条。我尝试添加了fadeIn（）和fadeOut（）方法。问题是当它淡出时，它会淡出整个导航分区！不仅仅是背景色。这是问题

$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        header.removeClass('noBackground').addClass('blackBackground').fadeIn();
    } else {
        header.removeClass('blackBackground').fadeOut().addClass('noBackground');
    }
});
});

---

Full、HTML、CSS和jQuery on

fadeOut（）方法可以在jQuery元素上实现，而不是在类上实现。您的代码运行得非常好

这里的问题是，当您滚动回顶部时，您的

#nav

div被隐藏。这是因为

.fadeOut（）

方法通过将匹配元素淡入透明来隐藏它们。因此，您从else条件中删除了

.fadeOut（）

，它工作正常

这是经过编辑的代码

$(function() {
    //caches a jQuery object containing the header element
    var header = $('.noBackground');
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('noBackground').addClass('blackBackground').fadeIn();
        } else {
            header.removeClass('blackBackground').addClass('noBackground');
        }
    });
});

编辑：

简单的扭曲将显示以下效果：

$(function() {
    //caches a jQuery object containing the header element
    var header = $('.noBackground');
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            if(header.hasClass('noBackground')) {
                header.hide();
                header.removeClass('noBackground')
               .addClass('blackBackground').fadeIn(2000);
            }
        } else {
            if(header.hasClass('blackBackground'))  {   
                header.hide();
                header.removeClass('blackBackground')
               .addClass('noBackground').fadeIn(2000);
            }
        }
    });
});

---

.

如果我理解您的问题，您希望为

的背景设置动画。看看这个-。除非使用jQuery UI或颜色插件，否则jQuery不能真正褪色，但为什么不使用CSS3转换呢？我使用addClass加载.blackBackground和removeClass加载noBackground。默认情况下没有背景。CSS转换不起作用，因为我希望类切换，在某个点触发淡入。谢谢，我确实注意到了，但是有一些后退。由于某些原因，没有实际的褪色。它只需快速恢复外观，不会褪色。另外，当你向上滚动到顶部时，有没有办法扭转这种效果？