CODEWITHSUNDEEP
javascriptjquerywordpress
Ronan G
Ronan G

Reputation: 11

Transform this Javascript code to JQuery

I tried to transform the next piece of JS code into JQuery but It doesn't work. Could you help ? 

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

initUpdateNavbarOnScroll();

I've made different try if it helps but any of them works...

// ​$( "#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');
//     }
// });​​​​​​​​​​​​​​​​​​​​​

// $( window ).scrollY(function() {
//   if ($( "site-navigation-wrap .dropdown-menu>li>a" )) {
//     navbarc.addClass('darklinker');
//   } else {
//     navbarc.removeClass('darklinker');
//   }
// });

Thx.

Upvotes: 1

Views: 68

Answers (2)

Tom
Tom

Reputation: 93

But why mannnn???????

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);
        }
    });
}

Upvotes: 0

jonhid
jonhid

Reputation: 2135

function initUpdateNavbarOnScroll() {
    var navbarc = $("#site-navigation-wrap .dropdown-menu>li>a");

    window.addEventListener('scroll', () => {
      if (window.scrollY >= window.innerHeight) {
        navbarc.addClass('darklinker');
      } else {
        navbarc.removeClass('darklinker');
      }
    });
}

initUpdateNavbarOnScroll();

Upvotes: 1

Related Questions