Question

我正在设计一个导航栏，在用户向下滚动页面后会出现背景栏。当它们滚动回到顶部时，条形（背景颜色）消失。我是按照以下说明进行的：

Add/remove class with jquery based on vertical scroll?

它工作正常，但现在我想在滚动条中添加淡入淡出。我尝试添加fadeIn（）和fadeOut（）方法。问题是当它淡出时，它会淡出整个#nav div！不仅仅是背景颜色。这是查询

$(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');
    }
});
});

this fiddle

上的完整，HTML，CSS和jQuery

Answer 1

这里的问题是当您向后滚动到顶部时隐藏了#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); } } }); });

Demo Fiddle

Answer 2

fadeOut（）方法可以在jquery元素上实现，而不是在类上。你的代码工作得很好

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

2 个答案: