Подпрыгивает div при параллаксе

Question

При создании параллакса, наткнулась на такую странность: Последний (самый нижний) блок начинает подпрыгивать при прокручивании сайта в самый низ. Увидеть можно на примере. Что это может быть?

Увеличение высоты блока .content или блока .body к решению проблемы не приводят. Увидела такую штуку - при единичном скролле колесика мыши, происходит смещение на 3-7 пикселей (случайно). По логам в консоли, вижу, что цифры отступов блоков всегда разнятся на те самые 3-7 пикселей. Но это не должно влиять, так как дойдя до конца страницы, дальше скроллить уже некуда.

Как остановить скачки?

$(document).ready(function() {

	// Запрос функции паралакса при скролле
	$(window).bind('scroll',function(e){
	    parallaxScroll();
	});


	// Создание адаптивности размера блоков на всю высоту для любого разрешения
	var div1Height = $('.div1').height();
        var div2Height = $('.div2').height();
	var div3Height = $('.div3').height();

	var div2Top = div1Height;
	$('.div2').css('top', div2Top);

	var div3Top = div2Top + div2Height;
	$('.div3').css('top', div3Top);

	div1Position = $('.div1').position().top; 
	div2Position = $('.div2').position().top;
	div3Position = $('.div3').position().top;
});
	
	
	//Создание эффекта параллакс
        var div1Position = 0;
        var div2Position = 0;
        var div3Position = 0;
        var scrolledAlbum = 0;
        var scrolledFooter = 0;

	function parallaxScroll(){
	    var scrolled = $(window).scrollTop();

	    if ($(document).scrollTop() + $(window).height() < $('.div2').height() + $('.div2').offset().top) {

	       if ($(document).scrollTop() + $(window).height() < $('.div1').height() + $('.div1').offset().top) {
                  $('.div1').css('top', div1Position - scrolled * 0.95);
                  $('.div2').css('top', div2Position - scrolled * 0.95);
                  $('.div3').css('top', div3Position - scrolled * 0.95);
                  scrolledAlbum = scrolled;
	       } else {
                  $('.div1').css('top', div1Position - scrolled * 0.95);
                  $('.div2').css('top', div2Position -scrolled*1.9 + scrolledAlbum);
                  $('.div3').css('top', div3Position -scrolled*1.9 + scrolledAlbum);
                  scrolledFooter = scrolled;
	       }
	    } else {
	       $('.div1').css('top', div1Position - scrolled * 0.95);
	       $('.div2').css('top', div2Position -scrolled*1.9 + scrolledAlbum);
	       $('.div3').css('top', div3Position -scrolled*2.85 + scrolledAlbum + scrolledFooter);
	    }
            $('.body').css('height', $('.div3').height() + $('.div3').position().top);
           
	}

body {
        margin: 0;
        padding: 0;
        background: #000000;
        font-family: 'Roboto', sans-serif;
        letter-spacing: 0.5px;
        color: #ffffff;
        font-size: 20px;
        width: 100%;
}

/* Content */

.bodyImage {
        width: 100%;
        height: 100vh;
        background: url(https://images.wallpaperscraft.ru/image/tekstura_treshchiny_chernyj_116899_1600x1200.jpg) no-repeat;
        background-size: 100%;
}

.body {
        position: relative;
}

.div1 {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000000;
	position: absolute;
	top: 0px;
	z-index: 2;
}

.div2 {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 3;
	background: url(https://images.wallpaperscraft.ru/image/tekstura_treshchiny_chernyj_116899_1600x1200.jpg) no-repeat;
        background-size: 100%;
}

/* Footer */

.div3 {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 4;
	background-color: #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DECAY</title>
	<link type="text/css" rel="stylesheet" href="styles/style.css">
	<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Roboto&display=swap" rel="stylesheet">
</head>
<body>
	<div class="content">
  
            <div class="bodyImage">
            </div>
			
            <div class="body">
               <div class="div1"> 
               </div>

               <div class="div2">
               </div>
		
               <div class="div3">
               </div>
            </div>

	 </div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</body>

Answer 1

Помогло добавление в css высоты для div class="body" равной 115vh.

БЛОГ НА HUSL

Подпрыгивает div при параллаксе

Ответы (1 шт):