0

ユーザーがページを少し下にスクロールした後に背景バーが表示されるナビゲーションを設計しています。上にスクロールして戻ると、バー（背景色）が消えます。私は次の手順を使用してそれを行っています：

垂直スクロールに基づいてjqueryでクラスを追加/削除しますか？

正常に動作しますが、スクロール時にバーのフェードインとフェードアウトを追加したいと思います。私はfadeIn（）メソッドとfadeOut（）メソッドを追加してみました。問題は、フェードアウトすると、＃navdiv全体がフェードアウトすることです。背景色だけではありません。これがクエリです

$(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()したがって、else条件から削除すると、正常に機能します。

これが編集されたコードです。

$(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 に答える