Queryselector all doesn’t work

Resolved

(@respodev)

hello @oceanwp, i’m using this piece of js ->


function initUpdateNavbarOnScroll() {
  var navbarc = document.querySelectorAll('#site-navigation-wrap .dropdown-menu>li>a.menu-link>span');
  window.addEventListener('scroll', () => {
    if (window.scrollY >= window.innerHeight) {
      navbarc.classList.add('darklinker');
    } else {
      navbarc.classList.remove('darklinker');
    }
  });
}

initUpdateNavbarOnScroll();

But the querySelectorAll('')doesn’t work versus the querySelector('')who’s working. Do you have some possible approach to fix it ?

Viewing 6 replies - 1 through 6 (of 6 total)

Theme Author oceanwp
(@oceanwp)

8 years ago

Hello, why you don’t use jQuery? As the script is loaded on the site, you can use it for your custom JS.

Thread Starter respodev
(@respodev)

8 years ago

I don’t know how to use it correctly. It’s easier for me to use JS.
Is it possible to do it with custom js ?
Thread Starter respodev
(@respodev)

8 years ago
I tried to do it in jquery (but it doesn’t work)… If it helps
```
// $( "#site-navigation-wrap .dropdown-menu>li>a" ).on( "scroll", function( event ) {
//     var navbarc = $( this );
//     if (window.scrollY >= window.innerHeight) {
//       navbarc.addClass('darklinker');
//     } else {
//       navbarc.removeClass('darklinker');
//     }
// });
```
Theme Author oceanwp
(@oceanwp)

8 years ago

Hello, what do you want to do exactly? I need to understand to be able to know if the code is good or not.
Thread Starter respodev
(@respodev)

8 years ago
I want to select all the menu-item of the main menu on scroll event and change their color from white to black. Exactly the job of the javascript code in my first comment (also I have a sticky navbar who’s start with a transparent background and on scroll Y event move to a white background).

I tried this JQuery code without success…
```
 
function initUpdateNavbarOnScroll() {
    var navbarc = $('#site-navigation-wrap .dropdown-menu>li>a');

    $(window).on('scroll', function(){
        if( $(window).scrollTop() >= $(window).innerHeight() ) {
            navbarc.addClass('darklinker');
        } else {
            navbarc.removeClass('darklinker');
        }
    });
}

initUpdateNavbarOnScroll();
```
Theme Author oceanwp
(@oceanwp)

8 years ago

Hi, you will need to hire a freelancer because it is a little complicated to do.
In a future release, I will try to do something similar so when the user will create a one page site, he will be able to change the color when they come to the sections.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Queryselector all doesn’t work’ is closed to new replies.

Tags