Плавающий блок на сайт

Как мог заметить внимательный посетитель моего блога читающего программиста, справа на сайте есть блок "Мои услуги". Этот элемент сайта меняет свое положение на странице при её прокрутке, то есть является как бы плавающим. Если вам хочется иметь такой же блог на воем сайте, то заметка ниже как раз для вас: сделать его просто; потребуется только минимум знаний javascript, мы обойдемся даже без jQuery.

Итак, просто скопируйте данный код к себе на сайт:

<div id="up">Блок над плавающим</div>

<div id="fb">Плавающий блок</div>			

<script>
function floatBlock () {

if (up.getBoundingClientRect().top<20) {
document.getElementById('fb').style.position="fixed";
document.getElementById('fb').style.top="21px";
}

else {
document.getElementById('fb').style.position="relative";
document.getElementById('fb').style.top="0";	
}
}

setInterval('floatBlock();', 500);
</script>

Как же этот код работает? Функция floatBlock() исполняется каждые 500 миллисекунд (раз в полсекунды) и проверяет, на каком расстоянии от верха окна браузера находится элемент "Блок над плавающим" (id="up") - up.getBoundingClientRect. Если это расстояние меньше 20-ти, то тогда "Плавающий блок" (id="fb") занимает фиксированную позицию на странице (document.getElementById('fb').style.position="fixed";) и устанавливается его координата относительно верха окна (document.getElementById('fb').style.top="21px";). В противном случае способ позиционирования элемента устанавливается как relative и он возвращается на место.