Как сделать чтобы видео из контента лендинга следовало при скроле?

Задан 4 месяца назад
Просмотрен 31919 раз
0

Как разместить видео в контент сайта в гк, а потом сделать чтобы оно следовало при скроле? Нужна реализация механики видео как на сайте https://antonovonline.com/trp

Сделаем GetOverflow лучше!
Проголосуйте 🔼 за полезные или 🔽 за бесполезные ответы.
2 ответа
–1

Блок «прилипающее» меню. Точно не помню как газывается

1

Мне было лень, но раз никто не ответил, то придется :D

Задайте контейнеру с видео класс lolkek Нужно задать класс именно видео-контейнеру, а не всему блоку, где видео расположено. Например, если вы используете 2 колонки с произвольным контентом, то задать класс нужно сюда

Далее добавляем css блок и пишем туда это

    .lolkek-fixed{
    	position:fixed;
        top:0;
        z-index: 1000;
        transition: all 300ms;
    }

Через свойство top можно регулировать, насколько видео будет "парить" от верхней границы, например так: top: 20px;

Далее добавляем JS блок и пишем:

    $(document).ready(function () {
        var element = $('.lolkek');
        var elementContent = $('.lolkek > div');
        var originalWidth = elementContent.width();

        $(window).scroll(function () {
          var windowTop = $(window).scrollTop();
          var elementTop = element.offset().top;

          if (windowTop > elementTop) {
            elementContent.addClass('lolkek-fixed');
            elementContent.width(originalWidth);

            // Если прокрутка ниже 1000px, изменяем размер
            if (windowTop > 1000) {
              elementContent.width('250px');
            }
          } else {
            elementContent.removeClass('lolkek-fixed');
            elementContent.width('auto');
          }
        });
	});

В строке if (windowTop > 1000) { можно указать в какой момент нужно уменьшить размер видео. В следующей строке elementContent.width('250px'); указываем размер, до которого нужно уменьшить видео

Ваш ответ