Регулировка высоты div динамически на основе прокрутки

Question

Я знаю, что есть довольно простой способ сделать это, но я не могу найти ничего в моих поисках.

Я нашел множество примеров перехода на определенное место прокрутки на странице, а затем анимацию div на другой размер, однако я хочу настроить максимальную высоту div в зависимости от местоположения прокрутки. Первоначально я хотел бы, чтобы максимальная высота div составляла около 150 пикселей, а затем, когда вы прокручиваете от 200 пикселей вниз по странице до 400 пикселей вниз по странице, я хочу, чтобы максимальная высота div уменьшалась до 75 пикселей. Тогда, очевидно, когда вы прокручиваете резервную копию, она становится больше.

Я не могу представить пример того, что я уже пробовал, поскольку я еще пытаюсь это сделать, поскольку я понятия не имею, с чего начать.

Примечание: Размер должен постепенно регулироваться с помощью положения прокрутки.

Answer 1

Я не уверен, если я понял вашу проблему, но когда я сделал я вышел с этим: D

$(window).scroll(function(){ 
    var scrollTop = $(window).scrollTop(); 
    if(scrollTop < 200){ 
    maxHeight = 150; 
    }else if(scrollTop > 400){ 
    maxHeight = 75; 
    }else{ 
    maxHeight = 150 - 75 * (((scrollTop-200) * 100)/200)/100; 
    } 
    $('#thediv').stop().animate({'max-height': maxHeight+"px"}, 500); 
}) 

Здесь у вас есть образец : https://jsfiddle.net/keccs4na/

Answer 2

Вы можете попробовать это:

$(window).on('scroll', function() { 
    var scrollTop = $(window).scrollTop(); 

    if (scrollTop >= 200 && scrollTop <= 400) { 
     $('#divID').stop().animate({height: "75px"}, 250); 
    } else { 
     $('#divID').stop().animate({height: "150px"}, 250); 
    } 
}); 

Примечание: Вы хотите использовать CSS, чтобы сначала установить высоту 150px.

Answer 3

Попробуйте это.

$(window).on('scroll', function() { 
    var v = $(window).scrollTop(); 
    if (v > 200) { 
     $('#id-of-div').css({"height": "75px","max-height":"75px"}); 
    } 
    else { 
     $('#id-of-div').css({"height": "150px","max-height":"150px"}); 
    } 
}); 

EDIT:

$(window).on('scroll', function() { 
     var v = $(window).scrollTop(); 
     if (v > 200) { 
      $('#id-of-div').animate({"height": "75px","max-height":"75px"},500); 
     } 
     else { 
      $('#id-of-div').animate({"height": "150px","max-height":"150px"},500); 
     } 
    });