问相对于父容器到父容器定位粘性

EN

$(window).scroll(function() {
    var distanceFromTop = $(this).scrollTop();
    if (distanceFromTop >= $('.section-one').offset().top) {
        $('.section-one h1').addClass('fixed');
    }
    if (distanceFromTop >= $('.section-two').offset().top) {
        $('.section-two h1').addClass('fixed');
    }
    if (distanceFromTop >= $('.section-three').offset().top) {
        $('.section-three h1').addClass('fixed');
    }


    if (distanceFromTop >= $('.parent').height()) {
        $('.section-one h1').removeClass('fixed');
        $('.section-two h1').removeClass('fixed');
        $('.section-three h1').removeClass('fixed');
    }
});

.parent {
   position: relative;
}
.section-one, 
.section-two, 
.section-three { min-height: 100vh; }

.section-one { background: lightgray; }
.section-two { background: lightblue; }
.section-three { background: lightgreen; }

.section-one h1{
   position: sticky;
   top: 0;
   z-index: 9999;
}
.section-two h1{
   position: sticky;
   top: 0;
   z-index: 9999;
}
.section-three h1{
   position: sticky;
   top: 0;
   z-index: 9999;
}


.section-one h1.fixed {
    position: fixed;
    top: 0px;
}
.section-two h1.fixed {
    position: fixed;
    top: 50px;
}
.section-three h1.fixed {
    position: fixed;
    top: 100px;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="parent">
   <div class="section-one">
      <h1>Header 1</h1>
      <div class="content">
         content 123
      </div>
   </div>
   <div class="section-two">
      <h1>Header 2</h1>
      <div class="content">
         content 789
      </div>
   </div>
   <div class="section-three">
      <h1>Header 3</h1>
      <div class="content">
         content 456
      </div>
   </div>
</div>
<div style="height: 100vh; background: green;"></div>