Появление блоков при прокрутке

@Kyuz · Регистрация: 27.10.2016

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

Есть два блока с высотой 100vh, как сделать, чтобы при прокрутке на второй блок, появлялся определенный блок?

@kalabuni · 30.06.2018, 15:49

Сообщение от Kyuz

Есть два блока с высотой 100vh

про единицу измерения vh можно чуть подробнее, ни разу не встречал такую...

@Mr_Sergo · 01.07.2018, 09:39

Сообщение от kalabuni

про единицу измерения vh можно чуть подробнее

CSS
1
height:100vh;

Почти то же самое что и:

CSS
1
height:100%;

100vh и 100vw Песочница

Тут подробней

@kalabuni · 01.07.2018, 13:01

zlojnaxa, спс

Qwerty_Wasd · 01.07.2018, 23:04

kalabuni, zlojnaxa, приветствую

Господа, вы ж про ТС совсем забыли

Kyuz, к примеру - https://codepen.io/qwerty_wasd/pen/wXNyZQ

HTML5
1
2
3
4
<div class="first-screen">Первая область</div>
<div class="second-screen">Вторая область
  <div class="showItMe">Привет :)</div>
</div>

CSS
1
2
3
4
5
*{marging:0;padding:0;box-sizing:border-box;font-size:30px;font-weight:bolder}
.first-screen,.second-screen{height:100vh;width:100%;text-align:center}
.first-screen{background:#29B6F6}
.second-screen{position:relative;background:#E57373}
.showItMe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:200px;line-height:200px;width:200px;border:2px solid #000;background:#009688;text-align:center;opacity:0;z-index:-999}

JavaScript
1
2
3
4
5
6
7
8
const scrollToSecScr=()=>{
  let secScr=document.querySelector('.second-screen'),
      blShow=document.querySelector('.showItMe');
  (document.documentElement.scrollTop>blShow.getBoundingClientRect().top)?
    blShow.style='z-index:999;opacity:1;transition:opacity 3s':
  blShow.style='z-index:-1;opacity:0';  
}
window.addEventListener('scroll',scrollToSecScr);

@Mr_Sergo · 01.07.2018, 23:56

Сообщение от Qwerty_Wasd

вы ж про ТС совсем забыли

Да, что-то как-то некрасиво получилось

, я "сова" (чаще всего), в пол десятого утра уже жутко хотелось спать и голова вообще туго соображала... нуу... самое главное что ответ найден

Qwerty_Wasd · 02.07.2018, 00:19

Не по теме:

zlojnaxa,

Сообщение от zlojnaxa

я "сова"

да Вы не один такой :)

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Kyuz Эта подпись не продается! 1 / 1 / 0 Регистрация: 27.10.2016 Сообщений: 365

	Появление блоков при прокрутке 30.06.2018, 10:31. Показов 8082. Ответов 6 Метки нет (Все метки) Есть два блока с высотой 100vh, как сделать, чтобы при прокрутке на второй блок, появлялся определенный блок? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	01.07.2018, 13:01
	zlojnaxa, спс 0