Форум

Эрибой · #1 (**permalink**) 30.11.2017, 18:21

Здравствуйте!
Подскажите, пожалуйста, как в коде реализовать вот такой эффект, как на этом сайте? Первый блок при скроллинге перемещается и трасформируется в сайдбар-меню.
Если я правильно понимаю, то такой эффект в CSS достигнут с помощью transform и transition. А как этот момент реализован в JavaScript?

void() · #2 (**permalink**) 30.11.2017, 18:29

Есть в jQuery scrollTop. Можно получать расстояние при прокрутке, и если оно соответствует определенным значениям, менять стили (задавать класс, например) нужному блоку.

void() · #3 (**permalink**) 30.11.2017, 21:11

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

</head>
<body>
	<div id="test" style="height:2000px;"></div>
	<div class="floatDiv"></div>

	<script>

		$(document).ready(function () {
			var element = document.querySelector('.floatDiv');

			$(window).scroll(function(){
				var ScrollTop = parseInt($(window).scrollTop());


				if (ScrollTop > 300 && ScrollTop < 1000) {
					element.classList.add("left");
				}else{
					element.classList.remove("left");
				}
				if (ScrollTop > 1000) {
					element.classList.add("left2");
				}else{
					element.classList.remove("left2");
				}
			});
		});
	</script>

	<style>
	body{
		margin: 0;	
		padding: 0;	
	}
	.floatDiv{
		width: 200px;
		height: 200px;
		background:darkOrange;
		margin:0 auto;
		position:fixed;
		top:0;
		transition: 1s;
	}

	.left{
		background: #333;
		height: 100%;
		width: 100px;	
		transition: 1s;
	}
	.left2{
		background: blue;
		height: 100px;
		width: 100%;	
		transition: 1s;
		bottom:0;

	}
</style>
</body>
</html>

Эрибой · #4 (**permalink**) 23.02.2018, 09:44

Сообщение от void()

Есть в jQuery scrollTop. Можно получать расстояние при прокрутке, и если оно соответствует определенным значениям, менять стили (задавать класс, например) нужному блоку.

Спасибо огромное! Ваше решение очень пригодилось.

Форум

Справочник

Discord чат

Курсы javascript