Как увеличить блок при прокрутке ниже страницы?

Question

[Max Shteklya]

Есть блок с позицией fixed. Как увеличить этот блок при прокрутке ниже страницы на 50% и уменьшить его на 50% когда прокрутили назад с АНИМАЦИЕЙ?

Answer 1

[Aleksey Solovyev]

Добавить событие при скролле

<style>
	body{
		width: 100%;
		height: 300vh;
	}
	section{
		position: fixed;
		left: 0;
		top: 0;
		height: 200px;
		width: 100%;
		background-color: royalblue;
		transition: height 2s;
	}
</style>
<section></section>
<script>
	let section = document.querySelector('section');

	window.onscroll = magic;

	function magic(){
		// 500 расстояние при котором событие произойдет 
		if (window.pageYOffset > 500) {
			section.style.height = '500px'
		} else {
			section.style.height = '200px'
		}
	}
</script>

Comments

[Max Shteklya]

А можете в jquery переделать? Я в js не силен.

[Aleksey Solovyev]

@BedOmar

.show{
  	height: 500px;
 }

$( window ).scroll(function() {
  	if ( $(window).scrollTop() > $(window).height()/2 ) {
  		$('section').addClass('show');
  	} else {
  		$('section').removeClass('show');
  	}
});

где $(window).height()/2 - половина высоты окна, $(window).scrollTop() - позиция скролла от верха страницы