Как скрыть элементы при прокрутке блока?

Question

[1ss1za]

Можно ли как-то скрывать блоки в зависимости от скролла, примерный html тут

https://codepen.io/mamayanekuril/pen/JjGQLzr

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

Answer 1

[Владимир Солнцев]

Вот он какой - интерфейс для людей!)))

А по теме: событие scroll и размер прокрутки страницы в помощь) Код не дам, лень.

Answer 2

[Александр Осадчий]

Вот, вдруг поможет - скрипт, которые при прокрутке вверх добавляет класс top, при прокрутке вниз удаляет - это может вам помочь:

$(window).bind( 'DOMMouseScroll mousewheel', function ( event ) {
		if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) {
		  $('body').removeClass('top');
		} else {
		  $('body').addClass('top');
		}
	});