Title: Queryselector all doesn’t work
Last modified: April 24, 2018

---

# Queryselector all doesn’t work

 *  Resolved [respodev](https://wordpress.org/support/users/respodev/)
 * (@respodev)
 * [8 years ago](https://wordpress.org/support/topic/queryselector-all-doesnt-work/)
 * hello [@oceanwp](https://wordpress.org/support/users/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](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [8 years ago](https://wordpress.org/support/topic/queryselector-all-doesnt-work/#post-10214180)
 * 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](https://wordpress.org/support/users/respodev/)
 * (@respodev)
 * [8 years ago](https://wordpress.org/support/topic/queryselector-all-doesnt-work/#post-10214391)
 * 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](https://wordpress.org/support/users/respodev/)
 * (@respodev)
 * [8 years ago](https://wordpress.org/support/topic/queryselector-all-doesnt-work/#post-10214510)
 * 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](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [8 years ago](https://wordpress.org/support/topic/queryselector-all-doesnt-work/#post-10218017)
 * 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](https://wordpress.org/support/users/respodev/)
 * (@respodev)
 * [8 years ago](https://wordpress.org/support/topic/queryselector-all-doesnt-work/#post-10220216)
 * 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](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [8 years ago](https://wordpress.org/support/topic/queryselector-all-doesnt-work/#post-10222134)
 * 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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/oceanwp/4.1.5/screenshot.png)
 * OceanWP
 * [Support Threads](https://wordpress.org/support/theme/oceanwp/)
 * [Active Topics](https://wordpress.org/support/theme/oceanwp/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/oceanwp/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/oceanwp/reviews/)

## Tags

 * [js](https://wordpress.org/support/topic-tag/js/)

 * 6 replies
 * 2 participants
 * Last reply from: [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * Last activity: [8 years ago](https://wordpress.org/support/topic/queryselector-all-doesnt-work/#post-10222134)
 * Status: resolved