Фиксированное, горизонтальное плавающее меню с отступом на JavaScript

Вот так выглядит код фиксированного горизонтального меню на JS

<script type=»text/javascript»>

var m1 = 70; /* высота шапки в пикселях */
var m2 = 0; /* отступ, когда во время прокрутки шапка уже не видна */
var menuID = «menu-top-almost-fixed»;
/* id горизонтального меню для закрепления */
var menuOpacityOnChange = «0.82»;
/* прозрачность меню при
скроллинге:
1 — непрозрачное,
0.5 — полупрозрачное
0.0 — полностью прозрачное*/
var menuOpacityOnChangeIE = menuOpacityOnChange * 100;

/* функция кроссбраузерного определения
отступа от верха документа к текущей позиции
скроллера прокрутки */
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;
}

/* функция, которая устанавливает верхний отступ
для «плавающего» фиксированного вертикального
меню в зависимости от положения
скроллера и видимости шапки */
function marginMenuTop() {
var top = getScrollTop();
var s = document.getElementById(menuID);

if(typeof s != «undefined» && s){

if (top+m2 < m1) {
s.style.top = (m1-top) + «px»;
s.style.filter = s.style.filter.replace(«progid:DXImageTransform.Microsoft.Alpha(opacity=»+menuOpacityOnChangeIE+»)»,»»);
s.style.opacity = «1»;

} else {
s.style.top = m2 + «px»;
s.style.opacity = menuOpacityOnChange;
s.style.filter = s.style.filter.replace(«progid:DXImageTransform.Microsoft.Alpha(opacity=»+menuOpacityOnChangeIE+»)»,»»);
s.style.filter += «progid:DXImageTransform.Microsoft.Alpha(opacity=»+menuOpacityOnChangeIE+»)»;

}
}
}

/** функция регистрирует
вычисление позиции
«плавающего» меню при прокрутке страницы
**/

function setMenuPosition(){ if(typeof window.addEventListener != «undefined»){ window.addEventListener(«scroll», marginMenuTop, false); } else if(typeof window.attachEvent != «undefined»){ window. attachEvent(«onscroll», marginMenuTop); } marginMenuTop(); };

/** регистрируем вызов
необходимых функций после
загрузки страницы **/

if(typeof window.addEventListener != «undefined»){
window.addEventListener(«load», setMenuPosition, false);

} else if(typeof window.attachEvent != «undefined»){
window. attachEvent(«onload», setMenuPosition);
}
</script>

Прокомментировать

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>