Существует множество учебных пособий, позволяющих увеличить высоту заголовка, когда вы прокручиваете вниз и становитесь больше, когда прокручиваете предыдущую точку. Мне было интересно, как увеличить высоту заголовка, как только вы прокрутите список, но со свитком. поэтому, если вы прекратите прокрутку до завершения анимации, она также прекратится... тогда, когда вы возобновляете прокрутку вверх или вниз, это также возобновляется.
Вот скрипка, которая не работает вообще, как я хочу, но ее код, который я нашел для анимации в прокрутке...
$(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';
}
});
Вы слишком усложняете это. Попробуй это:
$(window).scroll(function(){
$('.header').height(200 - (200 * $(this).scrollTop() / $('body').height()));
});
Демо: http://jsfiddle.net/9tgDs/
Обновление: (ограничение усадки при 150 пикселей)
$(window).scroll(function(){
var _height = 200 - (200 * $(this).scrollTop() / $('body').height());
if (_height >= 150) {
$('.header').height(_height);
}
});