Transform this Javascript code to JQuery

Question

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.

if the original works, why do you want to do this? That is so very odd!! — Randy Casburn
– Randy Casburn, Commented Apr 24, 2018 at 17:46
if ($( "site-navigation-wrap .dropdown-menu>li>a" )) this will always return true as jQuery() returns an object even if no elements are selected. Also there is no jQuery function named scrollY() unless you are using some plugin library. — Patrick Evans
– Patrick Evans, Commented Apr 24, 2018 at 17:47
Well, the problem is that the querySelectorAll doesn't work but the querySelectordo his job. But I want to select them all... I asked to the theme owner and he told me to write it in JQuery because it's load in the theme. They should have a conflict somewhere, i think but don't know where exactly... — Ronan G
– Ronan G, Commented Apr 26, 2018 at 7:49

jonhid · Accepted Answer · 2018-04-24 17:52:21Z

1

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

answered Apr 24, 2018 at 17:52

jonhid

2,1451 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom · Accepted Answer · 2018-04-24 18:24:24Z

0

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

answered Apr 24, 2018 at 18:24

Tom

932 silver badges11 bronze badges

1 Comment

Ronan G Over a year ago

Hi Tom, I loaded the code with the missing ' ' -> ` 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(); ` But it doesn't work. Basicly I asked for JQuery because the querySelectorAlldidn't work (versus the querySelectorwho's working) But I want to select them all

Collectives™ on Stack Overflow

Transform this Javascript code to JQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related