Queryselector all doesn’t work

  • Resolved respodev

    (@respodev)


    6 years, 7 months ago

    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)

    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)

    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)

    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)

    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)

    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)

    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