jQuery关于滚动标题效果答案

【问题标题】：jQuery on scroll header effectjQuery关于滚动标题效果
【发布时间】：2013-08-14 11:21:43
【问题描述】：

大家好

我想做一个jquery on scroll header effect。我刚刚在代码中添加了一些更改但它没有按照我想要的方式工作。我想制作效果 - 当我向下滚动一点像素以将标题更改为小高度时。或者用其他样式显示隐藏的标题

因此，当滚动正常标题以向上滑动然后像向下滑动一样显示隐藏标题时... 我在这方面花了很多时间，但它只适用于 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

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

谢谢

【问题讨论】：

标签： jquery html css effects

【解决方案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

【讨论】：

【解决方案2】：

为什么不直接 addClass 并在 CSS 中完成其余的工作？

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

【讨论】：

因为他试图在标题缩小和扩大时对其大小进行动画处理。
@DevIshOne 是的，您可以使用 CSS3 做到这一点。更有效的方法。
例如 CSS 变换，如果尺寸改变将创建平滑过渡：w3schools.com/cssref/css3_pr_transform.asp
那么您应该已经发布了相应的 CSS 以及您的建议。请给我们看代码。谢谢。
我只是建议另一种解决方案。我没有时间为人们从头开始编写所有的 CSS3 动画代码。尽管如此，我的解决方案将适用于正确的 CSS。

【解决方案3】：

jsFiddle DEMO

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

【讨论】：