Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.11.2017, 17:21
Новичок на форуме
Отправить личное сообщение для Эрибой Посмотреть профиль Найти все сообщения от Эрибой
 
Регистрация: 30.11.2017
Сообщений: 2

Перемещение и трансформация блока во время скроллинга
Здравствуйте!
Подскажите, пожалуйста, как в коде реализовать вот такой эффект, как на этом сайте? Первый блок при скроллинге перемещается и трасформируется в сайдбар-меню.
Если я правильно понимаю, то такой эффект в CSS достигнут с помощью transform и transition. А как этот момент реализован в JavaScript?
Ответить с цитированием
  #2 (permalink)  
Старый 30.11.2017, 17:29
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 202

Есть в jQuery scrollTop. Можно получать расстояние при прокрутке, и если оно соответствует определенным значениям, менять стили (задавать класс, например) нужному блоку.
Ответить с цитированием
  #3 (permalink)  
Старый 30.11.2017, 20:11
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 202

<!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>

Последний раз редактировалось void(), 30.11.2017 в 20:15.
Ответить с цитированием
  #4 (permalink)  
Старый 23.02.2018, 08:44
Новичок на форуме
Отправить личное сообщение для Эрибой Посмотреть профиль Найти все сообщения от Эрибой
 
Регистрация: 30.11.2017
Сообщений: 2

Сообщение от void() Посмотреть сообщение
Есть в jQuery scrollTop. Можно получать расстояние при прокрутке, и если оно соответствует определенным значениям, менять стили (задавать класс, например) нужному блоку.
Спасибо огромное! Ваше решение очень пригодилось.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Закрытие блока через заданное время! Andrey_55 Общие вопросы Javascript 1 02.03.2016 09:04
После скрытия блока через заданное время zoOmer Общие вопросы Javascript 8 13.01.2014 16:51
Трансформация при закрытии блока XFrei Элементы интерфейса 1 14.10.2013 09:07
Перемещение блока при скроллинге region029 jQuery 11 06.10.2013 22:44
Position fixed, но динамический по оси ОХ tvixa Элементы интерфейса 4 09.09.2013 14:39