221

2121

HTML

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<body>
			<section class="sect1">
				<div class="header_text">
				Some Text
				</div>
			</section>
			
			<section class="sect2">
			</section>
			
			<section class="sect3">
			</section>
			
		</body>

CSS

body {
	morgin: 0;
}

section {
	height: 100vh;
	background-color: #666;
	position: relative;
	overflow: hidden; 

}

.sect1 {
	background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRDGJxQWmLV20iPmL_JILFoC3gCu8KKSXgQeBVNWUGFW2f-SCKgSg);
	background-size: cover;
}

.header_text {
	font-weight: bold;
	font-family: "Arial", sans-serif;
	fonr-size: 40px;
	text-transform: uppercase;
	color: #fff;
	display: inline-block;
	width: 240px;
	height: 39px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -120px;
	margin-top: -20px;
}

.sect2 {
	background-image: url(https://avatanplus.com/files/resources/original/58417477d8772158bfaef44f.jpg);
	background-size: cover;
}

.sect3 {
	background-image: url(http://peterbald-cat.ru/oboi/4/fon_tochki_ten_pyatna_1920x1080.jpg);
	background-size: cover;
}

JavaScript

$(document).ready(function() {

$(window).scroll(function(){
 var speed = 400;

var st = $(this).scrollTop();

if(st > 10) {$(".sect1").slideUp( speed, function(){ $(".sect2").slideDown( speed ); } );}
else if(st <= 10) { $(".sect1").slideDown( speed ); }



console.log(st);

});
});