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

Question

[mxbeat]

Есть двухколоночный макет: контент и сайдбар, в сайдбаре баннер, прилипающий при скролле, а в контенте есть блоки на всю ширину страницы, нужно, чтобы баннер исчезал при прохождении через эти блоки. Таких блоков может быть несколько, количество неизвестно. Мой код срабатывает только на первом блоке. Как его поправить, чтобы срабатывал на каждом блоке?

Answer 1

[0xD34F]

$(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;
  }));
});

Comments

[mxbeat]

0xD34F, подскажите пожалуйста, как подправить ваш код, чтобы баннер не показывался, если между дувумя fullwidth блоками мало места для скролла, например если высота между двумя ближайшими fullwidth блоками равна высоте баннера + 100px, то баннер остается скрыт на этом промежутке, заранее спасибо!