Этот js добавляет к html тегу класс (m3).
Проблема в том, что этот класс удаляет все классы прописанные в html.
Как сделать так чтобы класс не заменялся, а добавлялся к существующим классам?
var m1 = 150; /* высота шапки в пикселях */
var m2 = 0; /* отступ, когда во время прокрутки шапка
уже не видна */
var menuID = "block-system-main-menu";
/* id горизонтального меню для закрепления */
var menuOpacityOnChange = "0.7";
/* прозрачность меню при
скроллинге:
1 - непрозрачное,
0.5 - полупрозрачное
0.0 - полностью прозрачное*/
var menuOpacityOnChangeIE = menuOpacityOnChange * 100;
/* функция кроссбраузерного определения
отступа от верха документа к текущей позиции
скроллера прокрутки */
var m3 = "fixed_menu";
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";
s.className = "";
} 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+")";
s.className = m3;
}
}
}
/** функция регистрирует
вычисление позиции
«плавающего» меню при прокрутке страницы
**/
function setMenuPosition(){
if(typeof window.addEventListener != "undefined"){
window.addEventListener("scroll", marginMenuTop, false);
} else if(typeof window.attachEvent != "undefined"){
window. attachEvent("onscroll", marginMenuTop);
}
}
/** регистрируем вызов
необходимых функций после
загрузки страницы **/
if(typeof window.addEventListener != "undefined"){
window.addEventListener("load", setMenuPosition, false);
} else if(typeof window.attachEvent != "undefined"){
window. attachEvent("onload", setMenuPosition);
}
var m2 = 0; /* отступ, когда во время прокрутки шапка
уже не видна */
var menuID = "block-system-main-menu";
/* id горизонтального меню для закрепления */
var menuOpacityOnChange = "0.7";
/* прозрачность меню при
скроллинге:
1 - непрозрачное,
0.5 - полупрозрачное
0.0 - полностью прозрачное*/
var menuOpacityOnChangeIE = menuOpacityOnChange * 100;
/* функция кроссбраузерного определения
отступа от верха документа к текущей позиции
скроллера прокрутки */
var m3 = "fixed_menu";
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";
s.className = "";
} 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+")";
s.className = m3;
}
}
}
/** функция регистрирует
вычисление позиции
«плавающего» меню при прокрутке страницы
**/
function setMenuPosition(){
if(typeof window.addEventListener != "undefined"){
window.addEventListener("scroll", marginMenuTop, false);
} else if(typeof window.attachEvent != "undefined"){
window. attachEvent("onscroll", marginMenuTop);
}
}
/** регистрируем вызов
необходимых функций после
загрузки страницы **/
if(typeof window.addEventListener != "undefined"){
window.addEventListener("load", setMenuPosition, false);
} else if(typeof window.attachEvent != "undefined"){
window. attachEvent("onload", setMenuPosition);
}
Комментарии
Где – понятно. Вопрос Как?
Плюсик я пробовал подставлять, но класс тогда при каждом движении колеса мыши начинает расти.
block block-system block-menu clearfix fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu fixed_menu
И к тому же непонятно как потом убрать этот класс здесь?
s.style.top = (m1-top) + "px";
s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")","");
s.style.opacity = "1";
s.className = здесь;
Думал об этом. Но хочется, чтоб универсально и по правильному всё было.
Знаю, какой здесь форум. Всё-таки не про количество дрожжей в тесто на пироги спрашиваю. Многие из обитающих здесь с javascript знакомы.
Универсально – чтоб можно было использовать с другим id, просто поменяв var menuID.
Не понял