滚动时标题变小 - 滚动

Question

有很多教程可以让标题的高度在您向下滚动时变小，而在您向上滚动超过某个点时变大。我想知道如何在滚动时使标题的高度变小，但随着滚动。因此，如果您在动画完成之前停止滚动，它也会停止……然后当您继续向上或向下滚动时，它也会继续。

这是一个根本无法按我想要的方式工作的小提琴，但它是我发现的滚动动画的代码......

http://jsfiddle.net/A3XQG/

$(window).scroll(function(){ 

    var scrollPos = $(window).scrollTop();

    if( ( scrollPos === 0 ) && ( scrollState === 'top' ) ) {
        $('.header').stop().animate({height: '200px'}, 300);
        scrollState = 'scrolled';
    }       
    else if( ( scrollPos === 0 ) && ( scrollState === 'scrolled' ) ) {
        $('.header').stop().animate({height: '50px'}, 300);
        scrollState = 'top';
    }
});

Answer 1

你把它弄得太复杂了。试试这个：

$(window).scroll(function(){ 
    $('.header').height(200 - (200 * $(this).scrollTop() / $('body').height()));
});

演示：http://jsfiddle.net/9tgDs/

更新：（150px 的上限收缩）

$(window).scroll(function(){ 
    var _height = 200 - (200 * $(this).scrollTop() / $('body').height());

    if (_height >= 150) {
        $('.header').height(_height);
    }
});

演示：http://jsfiddle.net/9tgDs/2/