<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>