Как сделать, чтобы прилипающий блок в сайдбаре исчезал при достижении другого блока?

Есть двухколоночный макет: контент и сайдбар, в сайдбаре баннер, прилипающий при скролле, а в контенте есть блоки на всю ширину страницы, нужно, чтобы баннер исчезал при прохождении через эти блоки. Таких блоков может быть несколько, количество неизвестно. Мой код срабатывает только на первом блоке. Как его поправить, чтобы срабатывал на каждом блоке?
  • Вопрос задан
  • 232 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
$(window).scroll(function() {
  const $banner = $('.banner');
  const bannerHeight = $banner.outerHeight(true);
  const bannerTop = parseInt($banner.css('top'), 10);
  const windowTop = $(this).scrollTop();

  $banner.toggleClass('hide', $('.fullwidth').get().some(n => {
    const $n = $(n);
    const nTop = $n.offset().top;
    const minTop = nTop - bannerHeight - bannerTop;
    const maxTop = nTop - bannerTop + $n.outerHeight(true);

    return windowTop > minTop && windowTop < maxTop;
  }));
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
31 янв. 2023, в 22:42
2000 руб./за проект
31 янв. 2023, в 22:36
1500 руб./за проект
31 янв. 2023, в 22:20
10000 руб./за проект