<style>
.fixed {
position: fixed;
width: 100%;
top: 0px;
z-index: 9999;
/*Скрыть меню и загрузке*/
}
.chameleonshow{
transform: translateY(0%) !important;
}
.transtime{transition: all 0.4s cubic-bezier(0, 0, 0.8, 1.0)}
.fixed .t396__artboard {transition: all 0.4s ease}
div.chameleon .t396__artboard {background-color:#1d1d1d !important} /*меняем цвет для темного фона*/
div.chameleon .tn-atom {color: #ffffff !important} /*меняем цвет для светлого фона*/
.icon-white{display:none}
div.chameleon .icon-white{display:block}
div.chameleon .icon-black{display:none}
</style>
<script>
$(document).ready(function(){
let chameleonID = '#rec311649951'; /*id нашего zero меню*/
let scrolldistance = 100; //Дистанция появления меню
let menuHeight = 0;
let sector = 0;
let ancArr = [];
$(chameleonID).addClass('fixed');
setTimeout(function(){$(chameleonID).addClass('transtime')}, 500);
function findAnchors(){
menuHeight = $(chameleonID).height(); //Высота меню
i=0;
$('a[name="chameleon"]').each(function(){
ancArr[i] = $(this).offset().top; i++;
});
};findAnchors();
function getSector(){
let topDoc = $(document).scrollTop();
if(topDoc > scrolldistance){$(chameleonID).addClass('chameleonshow');
}else{$(chameleonID).removeClass('chameleonshow')};
for(i=0; i<ancArr.length; i++){
if( (topDoc+menuHeight) < ancArr[i] ){ sector = i; break;
}else if ((ancArr.length-1) == i) { sector = i+1; break;
};
};
if(sector % 2){$(chameleonID).addClass('chameleon');
}else{ $(chameleonID).removeClass('chameleon');
};
};
$(window).scroll(function() {getSector()});
$(window).resize(function() {findAnchors()});
});
</script>