Верстка, CSS, HTML, SVG

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

Есть div с классом bg-video и два div'а с классами event_1 и event_2. Видео должно оставаться на фоне пока идет скроллинг содержимого event_1. А потом начинается следующий div с классом event_2 и хотелось бы чтобы фоновое видео уезжало.
Если в стилях прописать для bg-video свойство position: fixed, то с дивом event_1 все хорошо, скролится на фоне видео. Но к сожалению следующего дива event_2 и футера не видно совсем. Обыгрывала разные варианты оберток и классов, видео или уезжает сразу или становится растянутым на всю величину дива event_1.
Буду благодарна за любые ответы, не обязательно давать готовые рецепты, подскажите, пожалуйста, в каком направлении копать.
(Верстаю на бутстрап 4 с jquery-3.3.1)
Ну так вроде просто: по условию менять $(window).scrollTop() на верхнюю координату event_2, передав ее аргументом. А если надо плавно перекатываться к блоку, то через .animate().
Условием может быть позиция прокрутки всей страницы, либо контента event_1 - это уж как захочется... сама реализация будет практически одинакова в обоих случаях, только параметры и меняются.
Получение координат элемента блока относительно документа - метод .offset(), событие прокрутки - scroll.
Сергей Свиридов
Сергей Свиридов
53 412
Лучший ответ
Александр Кузнецов Ярослав, спасибо огромное! Я надеялась обойтись силами css и html, так как с js еще на "вы". Ну значит пора учиться и заполнять пробелы.
Ну так на словах непонятна твоя затея  хотя бы показал что уже сделано думаю что что то в стиля перемудрил

Виктор Герман
Виктор Герман
61 828
Александр Кузнецов Спасибо за Ваше внимание моему вопросу. Действительно я не наглядно объяснила. вот на этом сайте https://x-waters.com видео стоит пока идет блок с анонсами мероприятий. А потом когда идет история заплывов и подвал, видео "уехало". Мне нужен такой же эффект. Надеялась обойтись без плагинов. Силами css и html. Может с z-index поиграться
Scroolly спешит на помощь.
Вся прелесть scroolly заключается в том, что каждая из этих границ областей действия правил задается с помощью вот такого наглядного синтаксиса:

el-top = vp-bottom - 100px (элемент начинает появляться)
el-bottom = vp-bottom - 100px (элемент заканчивает появляться)
el-center = vp-center + 30vp (элемент начинает поворот)
el-center = vp-center - 30vp (элемент заканчивает поворот)
el-top = vp-top + 100px (элемент начинает исчезать)
el-bottom = vp-top + 100px (элемент заканчивает исчезать)
А весь сценарий описывается так:

$('.my-element').scroolly([
{
from: 'el-top = vp-bottom - 100px',
to: 'el-bottom = vp-bottom - 100px',
cssFrom:{opacity:'.0'},
cssTo:{opacity:'1'}
},
{
from: 'el-center = vp-center + 30vp',
to: 'el-center = vp-center - 30vp',
cssFrom:{'transform': 'rotate(0deg)'},
cssTo:{'transform': 'rotate(180deg)'}
},
{
from: 'el-top = vp-top + 100px',
to: 'el-bottom = vp-top + 100px',
cssFrom:{opacity:'1'},
cssTo:{opacity:'.0'}
}
]);
Где vp – viewport, а el – элемент. Также можно пользоваться абстракциями doc для документа и con для контейнера элемента. А теперь об этом подробнее и с картинками…

leading-actors (2)

У каждого из них есть опорные точки, которые можно использовать в синтаксисе scroolly:

viewport: vp-top, vp-center, vp-bottom
элемент: el-top, el-center, el-bottom
контейнер: con-top, con-center, con-bottom
документ: doc-top, doc-center, doc-bottom

anchors (2)

Вот несколько примеров описания областей действия правил c помощью синтаксиса scrolly:

viewport-document

viewport-element (5)

Документация
Если Вас заитересовал плагин scroolly обязательно посмотрите официальную документацию. А она существует, и даже представлена в 2-х вариантах:

Для ленивых и нетерпеливых – github.com/chayka/jQuery.Scroolly/wiki/Short-Story
Для неторопливых и вдумчивых – github.com/chayka/jQuery.Scroolly/wiki/Long-Story
Ну и самое главное: обязательно посмотрите видео с нашей конференции 4front, на котором Борис сам захватывающе рассказал про скролл-эффекты в целом и scroolly в частности.

открыть в новом окне

В заключение
Автор библиотеки открыт для отзывов, предложений и пулл-реквестов. Репортите баги, присоединяйтесь к разработке, а главное – пробуйте использовать scroll-эффекты как в реальных проектах, так и для баловства и саморазвития.

Подробнее: https://html5.by/blog/scroll-effects/
Александр Кузнецов Алексей, спасибо за информацию. Очень интересный инструмент, похоже мне больше всего подходит Staging. К сожалению, на сайте не работают демки, но попробую покурить в этом направлении.
background: fixed?
Александр Кузнецов Денис, спасибо что уделили внимание моему вопросу. fixed хорошо решает задачу временно, пока идет первый блок. А вот дальнейший контент уже скрывает. К сожалению, fixed намертво фиксирует видео на экране, а мне нужно чтоб оно потом "уехало".