使用getBoundingClientRect（）处理具有相同类的多个元素？

Question

I'm trying to add sticky navigation to my website that will change as it scrolls over different sections. When scrolling over a section with the class .dark , it should change the logo and text colour to white.. otherwise black.

The javascript I've been using is below but this only seems to apply to the first element with the class .dark , how can I adapt this to target all elements with the same class?

window.addEventListener('scroll', function () {

        var section = document.querySelector('.dark').getBoundingClientRect(),
            logo = document.querySelector('#logo-container').getBoundingClientRect();

          if (section.top <= logo.top + logo.height && section.top + section.height > logo.top) {
            document.getElementById('logo-container').classList.add('white-logo');
            document.getElementById('navholder').style.color = "#fff";

          } else {
            document.getElementById('logo-container').classList.remove('white-logo');
            document.getElementById('navholder').style.color = "#111";
          }

     });

I apologise if this is an obvious question, I'm not too knowledgeable when it comes to javascript! I've tried to look for a solution to this but have not had much success.. any help would be massively appreciated.

Answer 1

If you break this out into several functions, it makes life easier. You can check if the logo is is any of the sections, and then set its class accordingly:

 const setLogoBlackStatus = status => { if (status) { document.getElementById('logo-container').classList.add('black-logo'); document.getElementById('logo-container').classList.remove('white-logo'); } else { document.getElementById('logo-container').classList.add('white-logo'); document.getElementById('logo-container').classList.remove('black-logo'); } } const logoIsInSection = logo => sectionRect => sectionRect.top <= logo.top + logo.height && sectionRect.top + sectionRect.height > logo.top window.addEventListener('scroll', function() { var sectionRects = [...document.querySelectorAll('.dark')] .map(el => el.getBoundingClientRect()); var logo = document.querySelector('#logo-container').getBoundingClientRect(); var logoInAnySections = sectionRects .some(logoIsInSection(logo)) setLogoBlackStatus(!logoInAnySections); }); 

 img { width: 50px; position: fixed; top: 20vw; left: 20vw; z-index: 1; } .white-logo { filter: invert(90%); } .section { width: 100%; height: 300px; } .dark { background-color: rgba(20, 20, 30); } .white { background-color: white; } 

 <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/cc.svg" id="logo-container"/> <div class="section white"></div> <div class="section dark"></div> <div class="section white"></div> <div class="section dark"></div>