Плавающий фиксированный блок.
 

Привет! Помогите разобраться как это сделать.

Вариант 1.
Есть 3 блока.
block1 {position:relative; height:500px;}
block2 {position:fixed; bottom:0; height:50px; width:100%;}
block3 {position:relative; height:300px;}
Нужно чтобы при прокрутке вниз, как только блок 3 появился внизу страницы, добавить блоку 2 стиль position:relative. И наоборот, как только при прокрутке вверх, скрывался блок 3, изменить position на fixed блока 2.

Есть вот такой скрипт, все работает, но в нем смена стиля зависит от расстояния прокрутки. Но он не походит т.к. высота block1 на разных страницах будет разная.

<script type="text/javascript">
var menu = document.getElementById('block2');
window.onscroll = function(){
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
if(scroll < '300'){
block2.style.position = 'fixed';
}else{
block2.style.position = 'relative';
}
}
</script>


Вариант 2.
Как в примере ниже (блок с кнопкой купить и ценой), но тут как я понял такой блок не фиксированный, а абсолютный. И он меняет родительский блок. Что и дает нужный эффект.

Пример: http://m.zara.com/ru/ru/женщин...2p3829064.html

Если кто-нибудь знает как это осуществить любой из вариантов, помогите пожалуйста. Я уже все перепробовал и самому сделать не получается. :help: :help:

Перехватывать событие скролирования... Считать размеры... В нужном случае менять ЦСС-свойства или назначать нужные классы нужным элементам...