<div id="screen_1">
   <h1 style="color:white">sample text
   </h1>
</div>
<div id="sticky-anchor">
</div>
<div id="screen_2">
   <h1 style="color:white">sample text
   </h1>
</div>
<div id="screen_3">
   <h1 style="color:white">sample text
   </h1>
</div>

h1{ position:absolute;
top:50%;
transform: translateY(-50%)}

#screen_1{
width:100%;
height:100vh;
background-color:red;
padding:0px !important;
margin:0px !important;
position:relative;
z-index:-1;
}
#screen_2{
width:100%;
height:100vh;
background-color:black;
padding:0px;
margin:0px;
position:relative;
}
#screen_2.stick{
width:100%;
height:100vh;
background-color:black;
padding:0px;
margin:0px;
position:fixed;
top:0px;
z-index:-1;
}
#screen_3{
width:100%;
height:100vh;
background-color:green;
padding:0px;
margin:0px;
position:relative;
}

function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
console.log(div_top);
console.log(window_top);
if (window_top > div_top) {
    $('#screen_2').addClass('stick');
    $('#sticky-anchor').height($('#screen_2').outerHeight());

} else {
    $('#screen_2').removeClass('stick');
    $('#sticky-anchor').height(0);
}
};

$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();

});