jQuery對滾動標題的影響

Question

嗨，大家好

我想在滾動標題效果上做一個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');
        }
    });
});

在這里 工作演示

請有人可以幫我嗎？

謝謝

Answer 1

您可以嘗試使用回調，

$(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更新示例

Answer 2

為什么不只是添加類，其余的都在CSS中呢？

$(window).scroll(function() {
  if($(window).scrollTop() > 50) {
    $('header').addClass('header-small');
  }
  else {
    $('header').removeClass('header-small');
  }
});

Answer 3

jsFiddle演示

$(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').slideUp('fast', function () {
                $('.header-small').slideDown('slow');
            });
        } else {
            bar.stop().animate({
                'top': '20px'
            }, 200);
            $('.header-small').slideUp('fast', function () {
                $('header').slideDown('fast');
            });
        }
    });
});