Помогите со скроллингом

[uasil]

На сайте http://juliapetit.com.br при прокрутке постов используется красивый эффект, который я давно хотел применить, но не знал как реализовать. При прокрутке вниз к следующему посту предыдущий пост постепенно становится невидимым, причём прокрутка постов происходит с разной скоростью. Пожалуйста, подскажите как прикрутить этот эффект к своему сайту.

[Deff]

Принцип :
1. При cкроле контролируется нижний край сообщения - если он в пределаx видимости и отстоит выше 30% высоты экрана - сообщение переводится в position:fixed; и придаётся новый класс Opacity
и отслеживается отступ верхнего края следующего сообщения от верхнего края экрана.

2. % Отступа верхнего края следующего сообщения - явлется коэффициентом прозрачности к предыдущему(c классом Opacity

[uasil]

Спасибо, принцип понятен, но я чайник в javascript и надеюсь на подсказку как бы прикрутить готовый скрипт. Как я понимаю, часть скрипта, ответственная за этот эффект, находится где-то здесь: http://juliapetit.com.br/wp-content/...s.js?ver=3.3.1

[uasil]

Помогите, кто-нибудь, пожалуйста

[bes]

скорей всего не лучший вариант

<style>
	div {
		height: 200px;
	}
</style>


<div class="op" style="background: red"></div>
<div class="op" style="background: green"></div>
<div class="op" style="background: blue"></div>
<div class="op" style="background: red"></div>
<div class="op" style="background: green"></div>
<div class="op" style="background: blue"></div>

<script>
window.onload = function () {
	if (!document.getElementsByClassName) {
		document.getElementsByClassName = function (className) {
			var elems = document.getElementsByTagName('*');
			var len = elems.length;
			var mas = [];
			for (var i = 0; i < len; i++) {
				if (elems[i].className == className) {
					mas.push(elems[i]);
				}
			}
			return mas;
		}
	}
	var elems = document.getElementsByClassName('op');
	var len = elems.length;
	var h;
	
	window.onscroll = function () {
		for (var i = 0; i < len; i++) {
			h = parseInt(elems[i].getBoundingClientRect().bottom);
			if (h < 0) {
					h = 0;
				}
				elems[i].style.opacity = h/200;
				elems[i].style.filter = 'alpha(opacity=' + h/2 + ')';
			} 
	}
}
</script>

[Deff]

bes,
Да вообщем норма - если позицию элемента с opacity менять еще на fixed, - то поди будет в точности как в примере ( в принципе добавление двух строк - вставка и удаление свойства

[bes]

да, заметил, там ещё приторможенный уход

[uasil]

bes,
спасибо большое!
Я попробовал сделать приторможенный уход через margin-bottom плюс margin-top чтобы размер окна не уменьшался, но тогда прокрутка происходит у меня не очень плавно. Да и обойдусь без этого.