Как изменять класс элемента при скроллинге?
Как сделать, чтобы при перекрытии навигацией блока 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,
может сделать полноценный макет и чем не устроил код, тот что вы показали, в первом сообщении. например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
суть в том, что из-за нескольких блоков с классом container скрипт добавляет класс к навигации и сразу же его удаляет. если добавлять класс непосредственно к самому блоку, который в зоне видимости - то класс добавляется. но нужно сделать, чтобы добавлялся класс к блоку навигации.
|
webgraph,
не понимаю, что вы хотите сделать и в чём у вас проблема. |
когда пользователь доходит до блока с классом container, нужно навигации nav добавить класс active.
|
А проблема заключается в том, что класс добавляется к навигации nav, но и сразу же удаляется.
|
<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> |
а где в скрипте какая-либо отсылка к навигации nav ? скрипт не работает
|
и суть-то главная в том, что класс добавляется именно тогда, когда .container находится под .nav, а не просто в зоне видимости.
|
Цитата:
Цитата:
|
В моем примере после каждого .container стоит <div style="height: 1000px"></div>, показывающий то, что в этой области у навигации .nav должен быть убран класс .active
|
между блоками .container - другие блоки, которые как раз таки и убирают класс .active у навигации.
|
и класс .active нужно добавлять не к .container , а к .nav !)))
|
Цитата:
<nav class="nav"></nav> <section class="container" style="height: 250px; background: green"></section> <div style="height: 1000px"></div> <section class="container" style="height: 250px; background: yellow"></section> <div style="height: 1000px"></div> <section class="container" style="height: 250px; background: blue"></section> <div style="height: 1000px"></div> <style> nav { background: red; position: fixed; top: 0; left: 0; height: 50px; width: 100%; z-index: 1; } .active { opacity: 0.25; } </style> <script> const navHeight = document.querySelector('nav').offsetHeight; window.addEventListener('scroll', function () { document.querySelectorAll('.container').forEach(function (node) { const rect = node.getBoundingClientRect(); if (rect.y >= -rect.height && rect.y <= navHeight) { node.classList.add('active'); } else { node.classList.remove('active'); } }); }); </script> |
зачем ты добавляешь .active к блоку .container? я же написала, что .active надо добавлять к .nav ))
|
Чтобы получилось в итоге так:
<style> .nav{ background: red; } .nav.active{ background: blue; } </style> |
scroll добавление класса при пересечении блоков
webgraph,
при условии строки 21 top: 0; <!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <nav class="nav"></nav> <section class="container" style="height: 250px; background: green"></section> <div style="height: 1000px"></div> <section class="container" style="height: 250px; background: yellow"></section> <div style="height: 1000px"></div> <section class="container" style="height: 250px; background: blue"></section> <div style="height: 1000px"></div> <style> nav { background-color: red; position: fixed; top: 0; left: 0; height: 50px; width: 100%; z-index: 1; } .nav.active{ background-color: blue; } </style> <script> const nav = document.querySelector('nav'); const navHeight = nav.offsetHeight; const boxs = Array.from(document.querySelectorAll('.container')); const navAddCls = () => { const add = boxs.some(box => { const rect = box.getBoundingClientRect(); const y = rect.bottom / (navHeight + rect.bottom - rect.top); return y > 0 && y < 1; }) nav.classList.toggle('active', add) } window.addEventListener('scroll', navAddCls); navAddCls() </script> </body> </html> |
воооо!!)) превосходно!)) великая благодарность тебе! )) потрясающий код! гениально))
|
Часовой пояс GMT +3, время: 03:36. |