Why is my page not scrolling the whole way?

Afternoon,

I’m currently trying to create a page similar to this:

https://www.lanajaylackey.com/about

Where the background scrolls and the text also scrolls,

I believe I’ve figured out the best way to do this (please do correct me, if there is a simpler or better way). However half of my text/bottom of my photo ends up being cut off, but the background continues to scroll. I’ve included a link to a video:

Anyone know what I’m doing wrong? Thank you!

HTML:

<!doctype html>
<html>

	<head>
		<title>💜 shannonkelseyann</title>
		<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
		<link href="info.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
			<section></section>
		<script src="https://code.jquery.com/jquery-3.3.1.js"
		integrity="sha256-2Kok7MbOyxgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
		crossorigin="anonymous"></script>
			<script type="text/javascript">
				$(window).scroll(function(){
					var scroll_position = $(window).scrollTop();
					$('section').css({
						'background-position-x' : + scroll_posoition + 'px' ;
					})
				})
			</script>

		<header>
			<nav>
				<a href ="index.html"><img class="header-image" src="https://i.imgur.com/Nj06vm2.gif" alt="♥" align="right" height="63" width="630"></a>
					<li><a href="index.html"><img src="https://i.imgur.com/c2UQ8om.png"></a></li>
					<li><a href="advertising.html"><img src="https://i.imgur.com/cQE71uK.png"></a></li>
					<li><a href="e-commerce.html"><img src="https://i.imgur.com/01tEvO3.png"></a></li>
					<li><a href="info.html"><img src="https://i.imgur.com/JjNQ54R.png"></a></li>
			</nav>
			<h1><span style="font-weight:500">SHANNON</span><span style="font-weight:300">KELSEYANN <img class="infopic" src="https://i.imgur.com/AEeoXHp.png" alt="♥" width="40%" height="40%" align="right">
			<br>STYLIST</span>
			<span style="font-weight:200">
			<br>WORKING WITHIN THE
			<br>FASHION INDUSTRY
			<br>FOR OVER TEN YEARS.
			<br>SPECIALISING MAINLY IN CAMPAIGN & MARKETTING SHOOTS.
			<br>BASED IN LONDON</span></h1>



			<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
			<script type="text/javascript">
				$(document).on('scroll', function(){
					$('h1').css("left", Math.max(500 - 0.35*window.ScrollY)
						+ "px");
				})
		</header>


		<footer><p style="text-align: center;">© 2020 by shannonkelseyann</footer></p>
	</body>
</html>

CSS CODE:


body {
	background-image: url(../portfolio/skyblue.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100vw;
	height: 2000px;
	background-position: center center;
	position: relative;
	margin: 0;

}

nav {

	display: inline;
	margin: 0;
}

nav li {
	margin: 0;
	display: inline-block;
	list-style-type: none;
	padding-top: 40px;
	padding-left: 30px;

}

nav li a {
	margin: 0;


}

h1 {
	font-family: 'Oswald', sans-serif;
	font-size: 70pt;
	color: white;
	text-align: left;
	padding-left: 26px;
	padding-top: 100px;
	position: fixed;
	top: 50%
	transform: translateY(-50%);
	white-space: wrap;

}

footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	color: white;
	font-family: arial;
	font-size: 10pt;
	display: bottom center;

}

.header-image {
	padding-right: 16px;
	padding-top: 8px;

}

.infopic {
	padding-right: 50px;

Hi @java7488985522 perhaps you could checkout using parallaxes like in this link