<style>
#rec50299116{
display: none;
opacity:0;
}
#rec50300533 {
display: none;
opacity:0;
}
/*Задаём ширину экрана в 100%*/
.floating {
width: 100%;
}
/*Выставляем фиксированную позицию на экране и номер слоя выше остальных*/
.fixed {
position: fixed;
top: 0px;
/*Задаём время и характер анимации для фона меню */
transition:all 0.3s cubic-bezier(0, 0, 0.8, 1.0);
}
.fposition{
z-index: 9999;
}
.sposition{
z-index: 9990;
}
</style>
<script>
$(document).ready(function(){
/* Задаём переменной значение ID меню с Zero */
var blockMenuID1 = '#rec50299116';
var blockMenuID2 = '#rec50300533';
//Добавляем класс с шириной и фиксацией
$(blockMenuID1).addClass('floating fixed fposition');
$(blockMenuID2).addClass('floating fixed sposition');
//Включаем наши меню
$(blockMenuID1).css('display' , 'block');
$(blockMenuID2).css('display' , 'block');
//Когда начался скролл экрана
$(window).scroll(function() {
var top = $(document).scrollTop();
//Если перемещение больше 100 px
if (top >= 100) {
//Задаём прозрачность меню
$(blockMenuID1).css('opacity' , '1');
} else {
//Иначе делаем невидимым
$(blockMenuID1).css('opacity' , '0');
};
//Прописываем ID нужных блоков при пролистывании
var scrollEvent = ($(window).scrollTop() > $("#rec50298212").offset().top);
var scrollEvent1 = ($(window).scrollTop() > $("#rec50298250").offset().top);
var scrollEvent2 = ($(window).scrollTop() > $("#rec50298512").offset().top);
var scrollEvent3 = ($(window).scrollTop() > $("#rec50298592").offset().top);
var scrollEvent4 = ($(window).scrollTop() > $("#rec50298603").offset().top);
var scrollEvent5 = ($(window).scrollTop() > $("#rec50298655").offset().top);
var scrollEvent6 = ($(window).scrollTop() > $("#rec50299041").offset().top);
//Если дошли до 1-го нужного блока
if(scrollEvent) {
//Меняем блоки
$(".fposition").css('z-index' , '9970');
$(blockMenuID2).css('opacity' , '1')
} else {
//Иначе нет
$(".fposition").css('z-index' , '9999');
$(blockMenuID2).css('opacity' , '0')
};
//Если дошли до 2-го нужного блока - Меняем блоки
if(scrollEvent1) { $(".fposition").css('z-index' , '9999'); };
//Если дошли до 3-го нужного блока - Меняем блоки
if(scrollEvent2) { $(".fposition").css('z-index' , '9970'); };
//Если дошли до 4-го нужного блока - Меняем блоки
if(scrollEvent3) { $(".fposition").css('z-index' , '9999'); };
//Если дошли до 5-го нужного блока - Меняем блоки
if(scrollEvent4) { $(".fposition").css('z-index' , '9970'); };
//Если дошли до 5-го нужного блока - Меняем блоки
if(scrollEvent5) { $(".fposition").css('z-index' , '9999'); };
//Если дошли до 5-го нужного блока - Меняем блоки
if(scrollEvent6) { $(".fposition").css('z-index' , '9970'); };
});
});
</script>