Есть сайт, на котором повторяющееся верхнее и нижнее меню, нижнее меню открывается и закрывается при скролле (вверх - закрыть, вниз - открыть) так вот, есть область на сайте (первый экран) на котором нижнее меню не должно появляться вовсе, потому как там есть в области видимости верхнее меню. Как можно сделать событие, чтобы например когда в область видимости входит первый блок снизу (первый экрана), к нижнему меню добавлялся например класс с параметром display: none (это уже сам подберу на вкус) и потом когда из области видимости уходит этот блок - класс с новым свойством убирался. Только чистый JavaScript. Спасибо за внимание)
-
Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете.– Дух сообщества Бот31 окт 2022 в 6:22
-
1) У вас есть идеи как это можно сделать? 2) Было бы неплохо если бы вы включили минимальные примеры того что вы описываете. (В некоторых моментах непонятно о чём вы говорите)– ΝNL99331 окт 2022 в 9:05
-
При скроле можно отслеживать видимость объектов с помощью Element.getBoundingClientRect() и показывать определённые элементы– Alexander Kiselev31 окт 2022 в 9:09
1 ответ
повторяющееся верхнее и нижнее меню
нижнее меню не должно появляться вовсе, потому как там есть в области видимости верхнее меню
т.е. по сути одно и то же меню должно показываться либо сверху(до скрола страницы вниз) либо снизу после. хм... кажется вам нужен css position: sticky
=)
#a, #b, #c{height: 100vh;}
#a{background: pink;}
#b{background: skyblue;}
#c{background: lightgreen;}
menu{
display: block grid;
grid-template: 'x' 10vh
'empty' 90vh
'y' 10vh / 1fr;
position: sticky;
height: 110vh;
top: -10vh;
background: rgba(90, 90, 90, .5);
float: left;
}
<div id='body'>
<menu>
<p>top menu</p>
<p>empty</p>
<p>bottom menu</p>
</menu>
<p id='a'></p>
<p id='b'></p>
<p id='c'></p>
</div>
для просмотра сниппет нужно развернуть