0

Есть сайт, на котором повторяющееся верхнее и нижнее меню, нижнее меню открывается и закрывается при скролле (вверх - закрыть, вниз - открыть) так вот, есть область на сайте (первый экран) на котором нижнее меню не должно появляться вовсе, потому как там есть в области видимости верхнее меню. Как можно сделать событие, чтобы например когда в область видимости входит первый блок снизу (первый экрана), к нижнему меню добавлялся например класс с параметром display: none (это уже сам подберу на вкус) и потом когда из области видимости уходит этот блок - класс с новым свойством убирался. Только чистый JavaScript. Спасибо за внимание)

3
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 31 окт 2022 в 6:22
  • 1) У вас есть идеи как это можно сделать? 2) Было бы неплохо если бы вы включили минимальные примеры того что вы описываете. (В некоторых моментах непонятно о чём вы говорите)
    – ΝNL993
    31 окт 2022 в 9:05
  • При скроле можно отслеживать видимость объектов с помощью Element.getBoundingClientRect() и показывать определённые элементы 31 окт 2022 в 9:09

1 ответ 1

0

повторяющееся верхнее и нижнее меню

нижнее меню не должно появляться вовсе, потому как там есть в области видимости верхнее меню

т.е. по сути одно и то же меню должно показываться либо сверху(до скрола страницы вниз) либо снизу после. хм... кажется вам нужен 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>

для просмотра сниппет нужно развернуть

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.