Вот сам фиксированный блок. Может кому понадобится.
Задача
Реализовать фиксированный блок с плавающим верхним отступом.
HTML
Код: Выделить всё
<div id="fixedBox">
Какой-то очень важный блок, который все время нужно видеть.
</div>
Код: Выделить всё
#fixedBox {
/* размеры фиксированного блока */
height: 30px;
width: 900px;
position: fixed;
/* отступ сверху когда шапка видна полностью */
margin-top: 170px;
}
Код: Выделить всё
<script type="text/javascript">
jQuery(document).ready(function(){
/* функция кроссбраузерного определения отступа от верха документа к текущей позиции скроллера прокрутки */
function getScrollTop() {
var scrOfY = 0;
if( typeof( window.pageYOffset ) == "number" ) {
//Netscape compliant
scrOfY = window.pageYOffset;
} else if( document.body
&& ( document.body.scrollLeft
|| document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
} else if( document.documentElement
&& ( document.documentElement.scrollLeft
|| document.documentElement.scrollTop ) ) {
//IE6 Strict
scrOfY = document.documentElement.scrollTop;
}
return scrOfY;
}
/* пересчитываем отступ при прокрутке экрана */
jQuery(window).scroll(function() {
fixPaneRefresh();
});
function fixPaneRefresh(){
if (jQuery("#fixedBox").length) {
var top = getScrollTop();
if (top < 170) jQuery("#fixedBox").css("margin-top",170-top+"px"); /* 170 - это наш отступ */
else jQuery("#fixedBox").css("margin-top","0");
}
}
});
</script>