我试图建立一个倒数第二部分占据固定位置的网站,最后一个部分结束。但是,目标是最后一部分永远不会中途化。为此,在penultima部分处于固定位置后,我检测到滚动是否来自上方。如果它到来,在某个点上页面滚动到底部。我在这里遇到问题,因为当页面确实滚动时,最后一部分的动画会卡住。你能救我吗?
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>
<section class="section1">
<div class="green"></div>
</section>
<section class="section2">
<div class="red">TESTING</div>
</section>
<section class="section3">
<div class="blue"></div>
</section>
&#13;