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

工作演示 here

有人可以帮我解决这个问题吗？

谢谢

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 updated example