Question

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

这是一个小提琴，它根本不起作用，但我发现它在滚动动画上的代码......

$(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/

滚动时，标题会变小 - 滚动

1 个答案: