0

我正在设计一个导航，在用户向下滚动页面后显示背景栏。当他们滚动回顶部时，栏（背景颜色）消失。我正在使用以下说明进行操作：

基于垂直滚动的jquery添加/删除类？

它工作正常，但现在我想在滚动条上添加淡入淡出。我试过添加 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');
    }
});
});

完整的，HTML，CSS 和 jQuery 在这个小提琴上

4

2 回答 2

1

这里的问题是#nav当您滚动回顶部时您的 div 是隐藏的。这是因为该.fadeOut()方法通过将匹配的元素淡化为透明来隐藏它们。所以你.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);
            }
        }
    });
});

演示小提琴。

于 2013-03-25T06:05:19.913 回答
0

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

于 2013-03-25T05:57:05.217 回答