Остановить параллакс, когда элемент достигнет родителя div, используя Rellax.js

Question

Я использую плагин Rellax.js для параллакса. Я хочу остановить анимацию, когда дочерние элементы полностью внутри родительского div, вот проект: https://codepen.io/nassimseffar/pen/wEWXQX

<div class="global">

    <div class="content">
        <div class="bgParallax">
            <div class="leftSection rellax" data-rellax-speed="-2" data-scrollax="properties: { 'translateY': '200%', 'opacity': 1.5 }">
                <h1>test 1</h1>
            </div>
            <div class="rightSection rellax" data-rellax-speed="2" data-scrollax="properties: { 'translateY': '200%', 'opacity': 1.5 }">
                <h1>test 2</h1>
            </div>
        </div>
    </div>

</div>

    *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.global{
  background:#efefef;
  .topText, .botText{
    margin:10px;
  }
  .content{
    margin:200px 0;
    background:#eee777;
    width:100%;
    .bgParallax{
      position: relative;
      width:100%;
      height:400px;
      .leftSection{
        position: absolute;
        top: -100px;
        left: 10%;
        background: #ddca7e;
        width: 40%;
        height: 400px;
      }
      .rightSection{
        position: absolute;
        top: 100px;
        right: 10%;
        background: #ffdd40;
        width: 40%;
        height: 400px;
      }
    }
  }
}

Вот картинка для моего запроса: введите описание изображения здесь

Большое спасибо за помощь.