Как складывать и раскладывать блоки при прокрутке?

Question

[colddave]

Как постепенно складывать блоки при скролле от контейнера вниз и раскладывать при скролле вверх?

Answer 1

[Anton fon Faust]

Вешаете обработчик на событие scroll и дальше вычисляете и меняете координаты/расстояния для каждого блока.

Answer 2

[Ankhena]

Если обернуть маленькие блоки в флексбокс и изменять только его высоту, то условий и подсчетов должно стать гораздо меньше.

Comments

[colddave]

а если блоки должны наслаиваться друг на друга?

[Ankhena]

colddave: дописать им отрицательные margin

[Ankhena]

colddave: идея выглядит примерно так: codepen.io/Ankhena/pen/ORdxWo
сжимайте окно

У меня без условий прокрутки и вообще горизонтальная, но сути это не меняет. Останется только зависимость высоты (у меня ширины) блока-обертки от прокрутки.

[colddave]

в IE кстати все молниеносно работает

[Ankhena]

colddave: Какой прекрасный браузер :)

Answer 3

[colddave]

Сделал так, но все жутко тормозит.

$(window).scroll(function() {
	var st = $(this).scrollTop();
	var c = $('.food-menu__wrapper').offset().top;
	var d = st-c-100;
	if(d>0){
		$(".food-menu__big-item-part--1").css({
			"transform":"translatey("+d+"px"
		});		
		$(".food-menu__big-item-part--2").css({
			"transform":"translatey("+d+"px"
		});		
		$(".food-menu__big-item-part--3").css({
			"transform":"translatey("+d+"px"
		});	
		$(".food-menu__big-item-part--4").css({
			"transform":"translatey("+d+"px"
		});	
		$(".food-menu__big-item-part--5").css({
			"transform":"translatey("+d+"px"
		});	
		$(".food-menu__big-item-part--6").css({
		"transform":"translatey("+d+"px"
		});	
		$(".food-menu__big-item-part--7").css({
		"transform":"translatey("+d+"px"
		});	
	} 
	if(d>=259){
		$(".food-menu__big-item-part--1").css({
			"transform":"translatey(259px"
		});		
	}
	if(d>=224){
		$(".food-menu__big-item-part--2").css({
			"transform":"translatey(224px"
		});	
		$(".food-menu__big-item-part p").css({
			"opacity":"0"
		});	
	} else{
		$(".food-menu__big-item-part p").css({
			"opacity":"1"
		});		
	}
	if(d>=216){
		$(".food-menu__big-item-part--3").css({
			"transform":"translatey(216px"
		});		
	}
	if(d>=187){
		$(".food-menu__big-item-part--4").css({
			"transform":"translatey(187px"
		});		
	}
	if(d>=155){
		$(".food-menu__big-item-part--5").css({
			"transform":"translatey(155px"
		});		
	}
	if(d>=106){
		$(".food-menu__big-item-part--6").css({
			"transform":"translatey(106px"
		});		
	}
	if(d>=69){
		$(".food-menu__big-item-part--7").css({
			"transform":"translatey(69px"
		});		
	}
});