javascript - Javascript滚动闪烁

Question

首先，如果这个问题是一个愚蠢的问题，我很抱歉，我是 JavaScript 的新手...当滚动时特定的 div 在视口中完全可见时，我希望 div 贴在底部...我做到了，但我猜随着滚动的每个像素，代码会一次又一次地工作，并且滚动时会闪烁。

请问你能帮帮我吗？

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();
});

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:200px;
  background-color:red;
  color: white;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.second {
  height:200px;
  width:200px;
  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:200px;
  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;
}

<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>

标签： javascriptjquery