How to Translate jQuery code into Vanilla JS

Curriculum Help JavaScript
#1

Hello everyone just trying to translate this jQuery code into Vanilla Js. I appreciate any help,regarding this topic, Thansk!!

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    /* console.log(scrollPos); */
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}
#2

Try this link

jQ to Js compiler:
https://closure-compiler.appspot.com/home

#3

Do you a project pen where you are currently using this function? When I use it, I get:

Uncaught TypeError: Cannot read property 'top' of undefined

It would be nice to see your full code to test.

#4

Sure Randell, here is the link to it. hope this helps.

https://jsfiddle.net/cse_tushar/Dxtyu/141/

#5

Here is an option:

function onScroll(event) {
  var sections = [...document.querySelectorAll('#menu-center a')];
  var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  sections.forEach(function(currLink) {
    var val = currLink.getAttribute('href');
    var refElement = document.querySelector(val);
    if (refElement.offsetTop <= scrollPos && (refElement.offsetTop + refElement.offsetHeight > scrollPos)) {
      //document.querySelector('#menu-center ul li a').classList.remove('active');
      currLink.classList.add('active');
    } else {
      currLink.classList.remove('active');
    }
  });
}

document.addEventListener('scroll', onScroll);

I commented out the one line, because I could not see any difference with or without it.

1 Like
#6

Hello Randell, I have looked at your code and i been reading it and follow each step. only 2 questions came into my mind.

  1. The var section = [… ] what is that mean? can it be without the […] as a regular variable and selector ? why […], and does it makes a difference.
  2. The .forEach can it also be done with regular for loop right ?

I think those are my only two things i see , thank you for your help.

#7

I made a small changed to the code I posted. You will notice now that I use the variable sections for the forEach. The ... is the spread operator. It is part of ES6 syntax which allows you to take an “array-like” object like the value returned from document.querySelectorAll(’#menu-center a’) and “spread” its values. By placing surrounding this with [ and ], it creates an actual array.

Absolutely. I was using the forEach which is similar to the each method in jQuery.

#8

Hi Randell,
Yes!! the second question got it… i will use the for loop i just feel more pure vanilla js, will be better, the forEach method i think its amazing as well… its good two combine two different methods and play around with options.
The first question what about if i dont use any of the […] as far as ES6 its concern, will make a difference ? or its good practice to implement as I’m currently working on the code. ? were can i find more information about the […] or what is actually called ? Thank you randell, sorry to bother you.

#9

and yes i actually see the change… you made, i think looks more better.

#10

i found this great link for Spread Syntax… Thnaks Randell.

https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754