滚动时标题会变小-滚动 [英] header gets smaller as you scroll - with the scroll

问题描述

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

There are plenty of tutorials to get a header's height to become smaller when you scroll down and get bigger when you scroll up past a certain point. I was wondering how to get the header's height to get smaller as soon as you scroll, but with the scroll. so if you stop scrolling before the animation is done, it stops as well...then when you resume scrolling up or down it resumes as well.

这里是一个小提琴，根本无法满足我的需要，但是我发现它可以滚动显示动画的代码...

Here is a fiddle that doesnt work at all how I want but its the code I found to animate on scroll...

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

推荐答案

您过于复杂了.试试这个:

You're over-complicating it. Try this:

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

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

更新:(上限缩小为150px)

Update: (cap shrinkage at 150px)

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

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

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

这篇关于滚动时标题会变小-滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！