I'm trying to make a site where the penultimate section assumes a fixed position and the last one goes over. However, the goal is for the latter to never be halfway through. For this, after placing the penultimate section in fixed position, I detect if the scroll comes from above. If it does, from the moment it passes a certain point scrolls to the bottom of the page. But I'm having problems from here: when the page does scroll animation the last section gets stuck. Can you help me?
function fixe_section(scrollTopPx){
if(scrollTopPx>$('.section2').offset().top){
$('.section2 div').css({'position':'fixed', 'bottom':'0', 'z-index':'-1'});
}
else{
$('.section2 div').css({'position':'static', 'z-index':'0'});
}
}
$(window).scroll(function(event){
scrollTopPx = $(window).scrollTop();
fixe_section(scrollTopPx);
});
section_move();
function section_move(){
var start_mov = $('.section2').offset().top+$('.section2').height()/2;
var move_to = $('.section3').offset().top+$('.section3').height();
var lastScrollTop = 0;
$(window).scroll(function () {
var st = $(this).scrollTop();
if(st>lastScrollTop){
if(st>start_mov){
$("html, body").animate({
scrollTop: move_to
}, 600);
return false;
}
}
lastScrollTop = st;
});
}section {
width: 100%;
height: 600px;
position: relative;
}
section div{
width: 100%;
height: 100%;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><sectionclass="section1">
<div class="green"></div>
</section>
<section class="section2">
<div class="red">TESTING</div>
</section>
<section class="section3">
<div class="blue"></div>
</section>