Проблема с работой функций slideUp, slideDown

202

10 апреля 2017, 06:13

Здравствуйте! Сразу скажу, что jQuery, точнее JavaScript, ведь jQuery - библиотека, начал изучать не давно, как и вообщем HTML, CSS.

Суть проблемы состоит в том, что при попытке сделать так чтобы при скроллинге вниз секция1 задвигалась вверх и выдвигалась секция 2, а при скроллинге вверх секция 2 задвигалась вниз и секция 1 выдвигалась, получается какая-то каша. При скроллинге вниз, всё работает, практически, правильно, а при скроллинге вверх, происходит какое-то дергание. В условиях (if) я менял значения и пытался логически построить цепочку выдвижения и задвижения, но тщетно.

Вот, собственно говоря, сам пример:

$(document).ready(function() { 
	 
	$(window).scroll(function(){ 
		 
		var st 
		st = $(this).scrollTop(); 
 
	if(st > 10) {$(".sect1").slideUp("slow");} 
		else if(st <= 10) {$(".sect1").slideDown("slow");} 
	else {} 
	 
	if(st > 101) {$(".sect2").slideUp("slow");} 
		else if(st <= 101) {$(".sect2").slideDown("slow");} 
	else {} 
	 
	console.log(st); 
	 
	});	 
});

body { 
	morgin: 0; 
} 
 
section { 
	height: 100vh; 
	background-color: #666; 
	position: relative; 
	overflow: hidden;  
	/*--Необходимо (overflow: hidden;) для того, чтобы сделать wievport*/ 
} 
 
.sect1 { 
	background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxIPDxUPDw8VFRUVFRUVFRUVFRUVFRUVFRUXFhUVFRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDQ0NDw0NDisZFRkrKys3LSs3NzctLTcrKysrNzctNysrNzc3LS0tNzctNy0tNy0rLSstLTctKy0tLS03Lf/AABEIAKgBLAMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAABAgAH/8QAFhABAQEAAAAAAAAAAAAAAAAAAAER/8QAFwEBAQEBAAAAAAAAAAAAAAAAAQIABf/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAwDAQACEQMRAD8A5kzM6LlszMWYsWALEgGMWDM2EszYY2MGxocYgMcOMyWxWNjNqWLYzJxsVY2A6kYrBjNoChYCAoMQDjAgFmYMzAszNhZmZmZizMCzHCGMbGYMWJDMTIQMOFmAOFsLBsOHGwJxsLY2MGws2MMCgxTjYrAGTgVgYgKAKRigFAFgUsWYhmYMxgMIYsYWYxmZJZiQypGkaFLHGhwhmOHCww4xIDYcZmDKxmCcCsbGKWxWAMkKxmKQoApFVYAUiqAKQoBQBAIYhiWYxgxaEisY0JSxjEgwhRSIZCYQDhxoQ2MSQMbC2FhjKbGZONiqMZkjFMCkVQDJsChYCkVVAUkVVSCkVQwKAIBALAlmJDGNDjAxmKkksYQ0UJDCklsMigxkY4QzYZDjAY2KxsI0YMXjM2oxsVgsZtSF0AosCsAKaKrBQU0KSFDE2KFBTRiqEqSDQCAWCmMEJBMCimsqCKKayoIYoGGCKKTDBFEMqNIZFBpDjRUZIxlRiBgxWNjNqRixjMlNi7BQpFiV1NBSKoUFAqqKFJoNFTTE0VVTQqCpqqEqTWNDFlQFgTgMIVCIYpNKoISkxUEKoKYqCGFJio0JTTC0JDYWLANhYhIxYBRYKrBWKKmrTQpNTVUBSUqoqSmpUKFJCqmpVAmqSCAaAowiFgYRFEGEQxSVGCKikmGCKhSYqJioRVRUTFQppihDCk4WJDYFBgE1VFYpoqk0FNTVVNCompqqmhUFTVVNFUEqqUkVNVU1KoEqTQoAtApjBDGBhgiiCpKopNMIhhSpSTFJVFRMVCFRUTDKUrhTFFKikkKAZgwrCsRRTRQU1NVU0Kiak0UKTRVVIqhU1VTUqTRVVNSYKmqqaFQUGihUJTFRgYqJJFURCUmKiYpSVQxMMVAsxJhStURFSlKzEmUhUKdLAto1tIYNoBa0VhWMFTaamhUArUUKFFNTUkUVhQoUU0JVE0UiggGgKaGMzNTFRmKaYqMxTTDGZQVDGYxJimZQMUzFJ06WYNp1mIbWZmZtFrMzCiswKbU1mChQzApDMFJFZklNDMFQCsyVQVLMxf/Z); 
	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(data:image/jpeg;base64,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); 
	background-size: cover; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<body> 
			<section class="sect1"> 
				<div class="header_text"> 
				Some Text 
				</div> 
			</section> 
			 
			<section class="sect2"> 
			 
			</section> 
			 
		</body>