|
|
16.06.2020, 11:40
|
 |
Профессор
|
|
Регистрация: 14.11.2014
Сообщений: 186
|
|
|
Как изменять класс элемента при скроллинге?
Как сделать, чтобы при перекрытии навигацией блока container к навигации добавлялся класс active? на чистом js
<!DOCTYPE html>
<html>
<body>
<nav class="nav" style="display: fixed;"></nav>
<section class="container"></section>
<div style="height: 1000px"></div>
<section class="container"></section>
<div style="height: 1000px"></div>
<section class="container"></section>
<div style="height: 1000px"></div>
<script>
var nav = document.querySelector('.nav');
function navGallery(){
let containers = document.getElementsByClassName('container');
for(var i = 0; i < containers.length; i++){
let container = containers[i].getBoundingClientRect();
//если контейнер находится под блоком навигации, то добавляем ему класс active
if(container.top < 0 && container.bottom > 0){
nav.classList.add('active');
} else {
nav.classList.remove('active');
}
}
}
navGallery();
window.addEventListener('scroll', navGallery);
</script>
</body>
</html>
Последний раз редактировалось webgraph, 16.06.2020 в 13:12.
|
|
16.06.2020, 11:50
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,138
|
|
webgraph,
может сделать полноценный макет и чем не устроил код, тот что вы показали, в первом сообщении.
например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
16.06.2020, 11:55
|
|
Профессор
|
|
Регистрация: 14.11.2014
Сообщений: 186
|
|
|
суть в том, что из-за нескольких блоков с классом container скрипт добавляет класс к навигации и сразу же его удаляет. если добавлять класс непосредственно к самому блоку, который в зоне видимости - то класс добавляется. но нужно сделать, чтобы добавлялся класс к блоку навигации.
|
|
16.06.2020, 12:21
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,138
|
|
|
webgraph,
не понимаю, что вы хотите сделать и в чём у вас проблема.
|
|
16.06.2020, 12:30
|
|
Профессор
|
|
Регистрация: 14.11.2014
Сообщений: 186
|
|
|
когда пользователь доходит до блока с классом container, нужно навигации nav добавить класс active.
|
|
16.06.2020, 12:44
|
|
Профессор
|
|
Регистрация: 14.11.2014
Сообщений: 186
|
|
|
А проблема заключается в том, что класс добавляется к навигации nav, но и сразу же удаляется.
|
|
16.06.2020, 15:38
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,802
|
|
<nav class="nav"></nav>
<section class="container" style="height: 1000px; background: green"></section>
<section class="container" style="height: 1000px; background: yellow"></section>
<section class="container" style="height: 1000px; background: blue"></section>
<style>
nav {
background: red;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
z-index: 1;
}
.active {
opacity: 0.25;
}
</style>
<script>
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function (entry) {
entry.target.classList[entry.isIntersecting ? 'add' : 'remove']('active');
});
}, {threshold: 0.25});
document.querySelectorAll('.container').forEach(function(node) {
observer.observe(node);
});
</script>
|
|
16.06.2020, 16:29
|
|
Профессор
|
|
Регистрация: 14.11.2014
Сообщений: 186
|
|
|
а где в скрипте какая-либо отсылка к навигации nav ? скрипт не работает
|
|
16.06.2020, 16:33
|
|
Профессор
|
|
Регистрация: 14.11.2014
Сообщений: 186
|
|
|
и суть-то главная в том, что класс добавляется именно тогда, когда .container находится под .nav, а не просто в зоне видимости.
|
|
16.06.2020, 16:37
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,802
|
|
|
Сообщение от webgraph
|
|
скрипт не работает
|
Сочувствую, у меня все работает.
|
Сообщение от webgraph
|
|
и суть-то главная в том, что класс добавляется именно тогда, когда .container находится под .nav, а не просто в зоне видимости.
|
Насколько я понял по «display: fixed», у вас атрибут nav должен быть «плавающий», поэтому любой «container» на странице всегда находится под «nav». |
|
|
|
