如何在 EJS 页面上使用客户端功能

Question

After spending a few hours, I could not figure out the best practise to use the 'client-side' functionality on EJS page. The scenario is stated below:

1. I am using express (NodeJS) and using the EJS to render the Landing page (along with the other functionality). Initially, I was struggling to use JQuery but I manage to require it to the 'app.js' (definitely, not the best practice but could not find alternative solution hence this question). So, coming to the original question. I want to use some the client-side scripting on the EJS page but as that page has server-side code not entirely sure how to use client side scripting on it (JQuery/Javascript, i,e. on scroll do that etc.).
2. My header.ejs file contains some menu items which I want to be dynamic, ie top menu bar to be sticky but as that navbar is in the header.ejs file not sure how can I do that from client-side. Currently, I could not call that do that from the one EJS file to another EJS, see below.

    // Sticky bar
    window.onscroll = function() {myFunction()};

    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
      } else {
        navbar.classList.remove("sticky");
      }
    }

Answer 1

When you use js files in ejs, it is like you don't use ejs or nodejs. It's just static files. And you can't use npm package.