查看图像时开始视差滚动

Question

我按照此示例在自举程序列中创建了视差，但是我的图像不在页面顶部，因此当我向下滚动足以看到图像滚动到一半时，图像就会显示在页面顶部。我不太擅长JavaScript，所以不确定该怎么做。我可以“暂停”视差直到图像可见吗？

这是我遵循的示例。

https://codepen.io/alberkko/pen/jONrwVv

HTML

<section id="twoImages" class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="parallax"></div>
            </div>
            <div class="col-md-6">
                <img class="d-block img-fluid" src="https://placebear.com/715/470" alt="shoe newspaper">
            </div>
        </div>
    </section>

CSS

body {
margin-bottom: 50em;
}

#twoImages {
  padding: 0;
  margin: 0;
  .col-md-6 {
   padding: 0;
    margin: 0;
  }
  .parallax {
    /* The image used */
    background-image: url("https://placebear.com/715/470");
    /* Full height */
    height: 100%;
    /* Create the parallax scrolling effect */
    /*background-attachment: fixed;*/
    background-position: center;
    background-size: cover;
  }
}

JS

var $ = jQuery.noConflict()
$(window).scroll(function(){
var scroll = $(this).scrollTop()
$(".parallax").css({"background-position":"0px "+scroll/2+"px"})
})