Применение функций в шаблонах .ejs

Question

Итак, у меня есть коды, показанные ниже, и я создаю приложение, используя Groom IDE (не знаю, слышали ли вы об этом). Я хочу включить код JavaScript, показанный ниже, в шаблон ejs и не знаю, как это сделать. ,Буду признателен за любую помощь от вас

CSS-код

nav{
    list-style-type: none;
    text-align: center;
    background-color: #3FA9A5;

}

.hide{
    font-size: 70px;
    font-family: 'Long Cang', cursive;
    display: block;
}
.appear{
    height: 70px;
    display: none;
    position: sticky;
    top: 0;
    transition: all 2s linear;

}

.appear img{
    width: 210px;

}

часть HTML-кода в файле ejs

<nav class="hide">
    <ul>
        <li class="hide">Unknown</li>
    </ul>
</nav>
<nav class="appear">
    <li><img url="../cat.png"></li>
</nav>

А вот код JS, который я хочу применить

var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")

window.onscroll = function(){
    if(window.scrollY < 70){
        hide.style.display = "block";
        appear.style.display = "none"
    } else {
        hide.style.display = "none";
        appear.style.display = "block"
    }
}

так выглядит мой код express.js прямо сейчас

const express = require('express');
const app = express();

app.set('view engine', 'ejs')
app.use(express.static('public'))

app.get('/', function(req, res){
    res.render('main')
})

app.listen(process.env.PORT || 3000, function(){
    console.log('Server is running!!')
})