滚动锁定最后一节

时间:2018-02-02 12:10:09

标签: javascript jquery html

我试图建立一个倒数第二部分占据固定位置的网站,最后一个部分结束。但是,目标是最后一部分永远不会中途化。为此,在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;
&#13;
&#13;

0 个答案:

没有答案