Как заставить параллакс оставаться фиксированным - PullRequest
Новая
       9

Как заставить параллакс оставаться фиксированным

0 голосов
/ 02 февраля 2020

Я изо всех сил пытался заставить параллакс "стартовать" в нужное время. Он прокручивается с верхней части страницы, и к тому времени, когда я попадаю в раздел, он становится белым. Я в некотором недоумении, в чем проблема.

Большое спасибо за вашу помощь!

Вот ссылка на кодовый блок: https://codepen.io/tsmmc23/pen/oNgrdgp

var $ = jQuery.noConflict();
$(window).scroll(function(){
  var scroll = $(this).scrollTop();
  $('.showcase-img').css({'background-position':'0px '+scroll/2+'px'});
});
#showcase {
  color: white;
  
  .showcase-box {
    background-color: black;
    text-align: center;
    width:100%;
    height: auto;
    

  }
  .showcase-img {
    min-height: 116px;
    padding-bottom: 100%;
    height: auto;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    img {

    }
  }
}
<section style="height: 100vh;"></section>
<section id="showcase">
  <div class="container-fluid">
    <div class="row">
      <div class="col-6 col-md-3 p-0 box">
        <div class="showcase-box h-100 d-flex justify-content-center flex-column">
          <span>TEST</span>
        </div>
      </div>
      <div class="col-6 col-md-3 p-0 box">
        <div class="showcase-img img-fluid" style="background-image: url('https://placekitten.com/g/400/400')"></div>
      </div>
      <div class="col-6 col-md-3 p-0 ">
        <div class="showcase-box h-100 d-flex justify-content-center flex-column">
          <span>TEST</span>
        </div>
      </div>
      <div class="col-6 col-md-3 p-0">
        <div class="showcase-img" style="background-image: url('https://placekitten.com/g/800/800')"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-6 col-md-3 p-0">
        <div class="showcase-img" style="background-image: url('https://placekitten.com/g/400/400')"></div>
      </div>
      <div class="col-6 col-md-3 p-0">
        <div class="showcase-box h-100 d-flex justify-content-center flex-column">
          <span>TEST</span>
        </div>
      </div>
      <div class="col-6 col-md-3 p-0">
        <div class="showcase-img" style="background-image: url('https://placekitten.com/g/400/400')"></div>
      </div>
      <div class="col-6 col-md-3 p-0">
        <div class="showcase-box h-100 d-flex justify-content-center flex-column">
          <span>TEST</span>
        </div>
      </div>
    </div>
  </div>
</section>
<section style="height: 100vh;"></section>
...