[Vuejs]-How to write Jquery script in Vuejs

by

0👍

✅

Stay away from jQuery when using Vue. Just stick with plain old vanilla JS. It’s more than capable of handling this task by using an event listener.

Something like:

const navBar = document.querySelector(".navbar");
const navLink = document.querySelector(".nav-link");
const navBarBrand = document.querySelector(".navbar-brand");
const backToTop = document.querySelector(".back-to-top");

window.addEventListener('scroll',handleScroll);

function handleScroll(){
      let scrollPosition = window.pageYOffset || window.scrollY || document.body.scrollTop || document.documentElement.scrollTop;

  if(scrollPosition >50) {
    navbar.classList.add("scrolled");
    navLink.classList.add("change-black");
    navBarBrand.classList.add("change-black");
    backToTop.classList.add("active");
 } else {
    // ... 
 }
 
}

Leave a comment