Javascript scroll flickering problem

See more:

Javascript

jQuery

First of all I'm sorry if this question will be a stupid one, I'm a newbie on JavaScript... I want a div stick to the bottom when a specific div is completely visible in the viewport while scrolling... I did it but I guess with every pixel of scroll the code works again and again and there's a flicker while scrolling.

Could you help me please?

https://codepen.io/erenerena/pen/oNBzxqE[^]

What I have tried:

<div class="container-left">
  <div class="left">
    <p class="heads">LEFT</p>
  </div>
</div>
<div class="container-right">
  <div class="whole">
  <div class="first">
    <p class="heads">FIRST</p>
  </div>
  <div class="second">
    <p class="heads">SECOND</p>
  </div>
    </div>
  <div class="dur"></div>
</div>

<script
			  src="https://code.jquery.com/jquery-3.5.1.min.js"
			  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
			  crossorigin="anonymous"></script>

body {
  padding:0;
  margin:0;
}

p{
  padding:0;
  margin:0;
}

.heads {
  font-size: 2vw;
  font-weight:bolder;
  padding-top:50px;
  text-align:center;
}
.first {
  height:1800px;
  width:600px;
  background-color:red;
  color: white;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.second {
  height:200px;
  width:600px;
  background-color:blue;
  color: white;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.container-left {
  float:left;
}

.container-right {
  float:left;
}

.left {
  height:3000px;
  width:600px;
  background-color:orange;
  color: white;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.sticky {
  margin-top: 0;
  position: fixed;
  bottom: 0;
  z-index: 9999;
}

function sticktothebottom() {
    let h = window.innerHeight;
    let window_top = $(window).scrollTop();
    let top = $('.dur').offset().top;
    let panelh = $(".whole").height();
    if (window_top + h > top ) {
        $('.whole').addClass('sticky');
        $('.dur').height($('.whole').outerHeight());
    } 
    
    if (window_top + top < panelh ) {
        $('.whole').removeClass('sticky');
        $('.dur').height(0);
    }
}
$(function() {
    $(window).scroll(sticktothebottom);
    sticktothebottom();
});