Движение блока при скроллинге

@ЭрудитНикита · Регистрация: 19.02.2014

Студворк — интернет-сервис помощи студентам

Есть блок div, который находится посередине экрана. Нужно сделать так, чтобы при скроллинге вниз блок плавно уезжал влево и скрывался. Можно ли здесь обойтись одним лишь JavaScript? Спасибо!

@Lazy_Den · 15.03.2014, 16:09

Сообщение от ЭрудитНикита

Можно ли здесь обойтись одним лишь JavaScript?

Можно. Следующий вопрос: "Как?". )) Не очень заботился над оптимизацией (оставил эту радость вам), но в принципе, смотрите такой вариант:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var block = document.getElementById('block'),
    flag = false,
    timer,
    i = 0,
    scrTop = 0;
 
window.onscroll = function(e){
    scrTop = this.pageYOffset;
    if(scrTop > 200 && !flag){
        clearInterval(timer);
        flag = true;
        i = 0;
        timer = setInterval(function(){
            block.style.left = -i + 'px';
            i++;
            if(i >= 155) clearInterval(timer);
        }, 0.5);
    }
    if(scrTop < 200 && flag){
        clearInterval(timer);
        flag = false;
        timer = setInterval(function(){
            block.style.left = -i + 'px';
            i--;
            if(i <= 0) clearInterval(timer);
        }, 0.5);
    }
};

@ЭрудитНикита · 16.03.2014, 09:51 **[ТС]**

Спасибо!

Добавлено через 12 часов 2 минуты
А как сделать, чтобы при остановке скроллинга, блок тоже останавливался?

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@ЭрудитНикита 0 / 0 / 0 Регистрация: 19.02.2014 Сообщений: 2

	Движение блока при скроллинге 15.03.2014, 13:14. Показов 2519. Ответов 2 Метки нет (Все метки) Есть блок div, который находится посередине экрана. Нужно сделать так, чтобы при скроллинге вниз блок плавно уезжал влево и скрывался. Можно ли здесь обойтись одним лишь JavaScript? Спасибо! 0

@ЭрудитНикита 0 / 0 / 0 Регистрация: 19.02.2014 Сообщений: 2
	16.03.2014, 09:51 [ТС]
	Спасибо! Добавлено через 12 часов 2 минуты А как сделать, чтобы при остановке скроллинга, блок тоже останавливался? 0

Движение блока при скроллинге

Решение