эффект прокрутки перекрывает содержимое страницы - css выпуск

Question

У меня небольшая проблема с css пользовательской темы WordPress. Я использую этот эффект , я адаптировал его для использования bootstrap 4 системы сетки и использую его в верхней части моей страницы темы:

<?php get_template_part('assets/page-top'); ?>

код шаблона такой же:

<div class="jumbotron jumbotron-fluid bg-scroll">
  <div class="container-fluid">
    <div class="row">
<?php $scrollable = new WP_Query( ['post_type' => 'featured', 'order' => 'ASC', 'posts_per_page' => 3] ); ?>
<?php if( $scrollable->have_posts() ): while( $scrollable->have_posts() ): $scrollable->the_post(); ?>
<?php $class = get_post_meta( get_the_ID(), 'class', true); ?>
      <div class="col-sm-12 col-md-12 col-lg-12 img-<?php echo $class; ?>">
        <!-- <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-12 img-text">
            <h1 class=""><?php #the_title(); ?></h1>
          </div>
        </div> -->
        <img class="img-fluid bg-img" src="<?php the_post_thumbnail_url(); ?>">
      </div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
    </div>
  </div>
</div>

Остальная часть страницы обернута в .container-fluid, потому что я хочу создать эффект параллакса для нижнего колонтитула, например this :

<div class="container-fluid content-wrapper">
// templates part here
</div>
<?php get_footer(); ?>

Код css, который я использую, это

/* Content wrapper */
.content-wrapper {
  z-index: 1;
  width: 100%;
  padding: 0;
  background-color: white;
 /* position: absolute; */
}
/* Parallax Footer content */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  padding: 0;
  background-color: white;
}
/* Top page scroll */
.bg-scroll{
  height: 400vh;
  padding: 0;
  margin: 0;
}
.bg-img{
  width: 100%;
  height: 100%;
}
.img-text{
  background-color: transparent;
  position: absolute;
  margin: 10em 2em 5em 2em;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.img-top{
  position: fixed;
  left: 0;
  padding: 0;
}
.img-middle{
  position: fixed;
  left: 0;
  padding: 0;
  opacity: 0;
}
.img-bottom{
  position: fixed;
  left: 0;
  padding: 0;
  opacity: 0;
}

А вот JS для нижнего колонтитула и верхнего эффекта страницы:

  var imgTop = $('.img-top');
  var imgMiddle = $('.img-middle');
  var imgBottom = $('.img-bottom');

  $(window).on('scroll', function(){
    var scroll = $(this).scrollTop();

    imgTop.css({
      'opacity': 1 - scroll / 300
    });

    imgMiddle.css({
      'opacity': 0 + scroll / 600
    });

    imgBottom.css({
      'opacity': 0 + scroll / 1200
    });
  });

  var footerHeight = $('.footer').height();

  $('.content-wrapper').css({'marginBottom':footerHeight});

Проблема, с которой я столкнулся, заключается в том, что верхний шаблон страницы будет перекрывать нижний колонтитул и содержимое страницы, находящейся внутри оболочки. Я попытался использовать position:absolute, чтобы исправить это, но я не могу решить проблему, и я думаю удалить эффект, чтобы оставить только параллакс нижнего колонтитула. Другая проблема заключается в том, что второе прокручиваемое изображение верхнего эффекта страницы будет видно только на некоторое время, а текст на нем не будет читаемым. Кто-нибудь может мне помочь, чтобы вещи отображались и работали правильно?