0

こんにちは、みんな

スクロール ヘッダー効果で jqueryを作成したいと思います。コードにいくつかの変更を加えましたが、思い通りに動作しません。私は効果を作りたい - ヘッダーのビットピクセルを下にスクロールして、高さを小さく変更します。または、非表示のヘッダーを他のスタイルで表示する

したがって、通常のヘッダーをスクロールして上にスライドさせてから、スライドダウンのような非表示のヘッダーを表示すると...私はこれに多くの時間を費やしましたが、fadeInとfadeOutでのみ機能しています

 jQuery code

 $(function() {
    $('.header-small').hide();
    var header = $(".header-small");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 200) {
            $('.header-small').show();


            header.removeClass('header').addClass("header-small");
            $('.header-small').addClass('animated fadeInUp'), {duration:500};


        } else {
            $('header').show();
            $('.header-small').hide();
            header.removeClass("header-small").addClass('header');
            $('header').addClass('animated fadeInDown');
        }
    });
});

動作デモ はこちら

誰かがこれを手伝ってくれませんか？

ありがとう

4

3 に答える 3

0

コールバックを使用してみてください。

$(function() {
        $('.header-small').hide();
        var bar = $('header');
        var top = bar.css('top');
        $(window).scroll(function() {
            if($(this).scrollTop() > 50) {
                bar.stop().animate({'top' : '0px'}, 200);
                $('.header-small').slideDown('slow',function(){

                    $('header').slideUp('slow');});
            } else {
                bar.stop().animate({'top' : '20px'}, 200);
                    $('header').slideDown('slow');
                    $('.header-small').slideUp('slow');
            }
        });
    });

また、よりクリーンな効果のためのいくつかのスタイリング

header
{
    position:absolute;
    width:400px;
    height:200px;
}

Jsfiddle の更新された例

于 2013-08-14T11:42:27.017 に答える
-1

addClass だけで残りを CSS で行うのはなぜですか?

$(window).scroll(function() {
  if($(window).scrollTop() > 50) {
    $('header').addClass('header-small');
  }
  else {
    $('header').removeClass('header-small');
  }
});
于 2013-08-14T11:27:13.650 に答える