заголовок уменьшается при прокрутке - с прокруткой

0

Существует множество учебных пособий, позволяющих увеличить высоту заголовка, когда вы прокручиваете вниз и становитесь больше, когда прокручиваете предыдущую точку. Мне было интересно, как увеличить высоту заголовка, как только вы прокрутите список, но со свитком. поэтому, если вы прекратите прокрутку до завершения анимации, она также прекратится... тогда, когда вы возобновляете прокрутку вверх или вниз, это также возобновляется.

Вот скрипка, которая не работает вообще, как я хочу, но ее код, который я нашел для анимации в прокрутке...

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';
    }
});
  • 1
    что ты уже испробовал? Мы можем дать идеи, но я надеюсь, что никто не кодирует это все для вас, учитывая, что вы не приложили усилий, чтобы написать это самостоятельно. Хитрость заключается в том, чтобы определить положение прокрутки окна и изменить высоту на основе этого до указанной минимальной высоты или максимальной позиции прокрутки
  • 0
    обновленный вопрос
Показать ещё 2 комментария
Теги:
scroll

1 ответ

1
Лучший ответ

Вы слишком усложняете это. Попробуй это:

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

Демо: http://jsfiddle.net/9tgDs/2/

  • 0
    Спасибо Большое. Я знал, что должен был сделать простой расчет, но, очевидно, не знал, что рассчитать. Я также только что попробовал это на моей собственной странице, которая имеет много контента, и заголовок становится все меньше. Как бы я мог остановить рост от, скажем, 250px? Спасибо еще раз за помощь!
  • 0
    Я добавил if (($ ('. Header'). Height ()> 150)) {вокруг вашей функции, но когда она останавливается на 150, она не будет увеличиваться при прокрутке вверх ...
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню