<style>
#rec565061772 { /*ID 2-го блока*/
position: sticky;
position: -webkit-sticky;
z-index: 999;
top: 0px;
}
#rec565384999 { /*ID 1-го блока*/
height: 1px!important;
opacity: 0;
}
.t-records {
overflow-x: unset !important;
}
.my_slide {
transition: all .3s;
opacity: 0;
}
.my_opacity {
opacity: 1 !important;
}
</style>
<script>
$('.text_1').addClass('my_slide');
$('.text_2').addClass('my_slide');
$('.text_3').addClass('my_slide');
$('.text_4').addClass('my_slide');
$('.img_1').addClass('my_slide');
$('.img_2').addClass('my_slide');
$('.img_3').addClass('my_slide');
$('.img_4').addClass('my_slide');
$('.text_1').addClass('my_opacity');
$('.img_1').addClass('my_opacity');
$(function stickyBlock() {
$(window).on('scroll', function () {
let posScroll = window.pageYOffset;
amount = 4; // Количество переменных (текстов)
let stickyBlock = '#rec565061772', // ID 2-го блока
startBlock = '#rec565384999', // ID 1-го блока (пустого)
stopBlock = '#rec565185399', // ID 4-го блока (который должен идти после слайдера)
wrapBlock = '#rec565121985', // ID 3-го блока (пустого)
scrollTop = $(window).scrollTop(), elementOffset;
startPosition = $(startBlock).position().top;
stopPosition = $(stopBlock).position().top;
wrapWidth = amount*800;
$(wrapBlock).css('height', wrapWidth);
if ($(stopBlock).length > 0) {
elementOffset = $(stopBlock).offset().top
}
let distance = (elementOffset - scrollTop),
height = $(stickyBlock).height(),
slide = ( height - distance);
let counter = posScroll - startPosition;
if (counter <= 800) {
if ($('.text_1').hasClass('my_opacity') == false) {
$('.my_slide').removeClass('my_opacity');
$('.text_1').addClass('my_opacity');
$('.img_1').addClass('my_opacity');
};
};
if ((counter > 800) && (counter <= 1600)) {
if ($('.text_2').hasClass('my_opacity') == false) {
$('.my_slide').removeClass('my_opacity');
$('.text_2').addClass('my_opacity');
$('.img_2').addClass('my_opacity');
};
};
if ((counter > 1600) && (counter <= 2400)) {
if ($('.text_3').hasClass('my_opacity') == false) {
$('.my_slide').removeClass('my_opacity');
$('.text_3').addClass('my_opacity');
$('.img_3').addClass('my_opacity');
};
};
if (counter > 2400) {
if ($('.text_4').hasClass('my_opacity') == false) {
$('.my_slide').removeClass('my_opacity');
$('.text_4').addClass('my_opacity');
$('.img_4').addClass('my_opacity');
};
};
if (distance <= height) {
$(stickyBlock).css('transform','translateY(-' + slide + 'px)')
} else {
$(stickyBlock).css('transform','translateY(0)')
};
});
})
</script>