How to convert jQuery to Vanilla Javascript? We are going to answer this question in full detail. Today I am going to share a quick tutorial which is actually a sequel of sorts to our last article. In our last article, we discussed how to use a simple JQuery script to change the color of the navigation bar on scroll down. One way that we can optimize this effect on any website is to convert it to vanilla Javascript so that it loads and runs faster.
Why should you bother removing JQuery from your website? Doesn’t it work just fine?
Vanilla Javascript can be up to 10X faster than using Jquery to accomplish the same thing. With the broad browser support of ES6, now is a great time to consider switching to Vanilla JS. Although Jquery often requires you to type less code to set up basic effects, it can be useful to know the correct JS syntax so that you are able to learn more powerful abilities.
Here’s a helpful little cheat sheet of some common JQuery scripts and their alternatives in Vanilla Javascript.
Setting up your project
We’re going to start by examining the Jquery script we’re replacing, and how it interacts with our HTML file. Set up your project with the following HTML:
<head>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="wrapper">
<div class="text"
<p>
Put some Lorem Ipsum in here from Lorem Ipsum Generator, or just make sure to fill the content of your page so it is long enough to scroll down a bit.
</p>
</div>
</div>
<!--end wrapper-->
</body>The only edits we are going to make to the HTML file are going to be adding the class “nav-fixed” to the ul element:
<ul class="nav-fixed">We are also going to create a new CSS class in our CSS file and give it a background color:
.nav-active {
background-color: $461B93;
}Once this is done, we can start building our script. The script tag will be placed toward the bottom of our HTML still within the <body> of our page.
We will start by creating a variable and naming it navbar. We will assign the method “querySelector” to it and target the “nav-fixed” class we gave to our ul element. This will target our navigation bar.
const navbar = document.querySelector('.nav-fixed');We’ll use the onScroll function on our window to add a CSS class once we are scrolled 100 pixels or more from the top of the window. If we are not scrolled more than 100 pixels from the top of the window, we will remove that class again. It will all work very fluidly. The code will look like this:
window.onscroll = () => {
if (window.scrollY > 100) {
navbar.classList.add('nav-active');
} else {
navbar.classList.remove('nav-active');
}
};Your finished product should look something like this:
The onScroll function is pretty useful. We actually used it in another cool project for making a sticky navbar here.
Prefer to learn by watching videos? Me too! Check out the video version of this tutorial below and subscribe to my channel on YouTube for more fun lessons.
