/
/
Анимация скрола
Анимация скрола
Эффект наложения блоков при скролле
Поблагодарить
Нужна помощь
Инструкция
*Настройки помечены комментариями в коде.
  1. Создайте необходимое количество Zero-Block
  2. После создания блоков добавьте элемент T123 и скопируйте в него код
  3. Скопируйте ID всех ваших блоков, к которым должен прмениться эффект наложения, и вставьте в код через запятую
Демо
<script>
$(function(){
    /* Укажите id всех блоков через запятую, которым нужно добавить эффект наложения */
    var id = '#rec825763352,#rec825763353,#rec825763354';

    $('head').append('<style>body {overflow-x: hidden;}#allrecords {overflow: visible !important;}#t-header,#t-footer {position: relative;z-index: 2;} .t-rec {position: relative;z-index: 1;overflow-x: hidden;}'+id+' { position: -webkit-sticky; position: sticky; top: 0; z-index: -1;}</style>');

    var lastBlock = $(id).last();
   
    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          
            if (!entry.isIntersecting) {
                $(entry.target).css('visibility', 'hidden');
            } else {
                $(entry.target).css('visibility', 'visible');
            }
        });
    }, { threshold: 0 });

    observer.observe(lastBlock[0]);

    $(window).on('load resize', function(){
        $(id).each(function(){
            var topPosition = $(window).height() - $(this).height();
            if (topPosition < 0) {
                $(this).css('top', topPosition)
            } else {
                $(this).css('top', 0)
            }
        });
    });
});
</script>
Скопировать код
Код скопирован