How add a class - if i scroll down?

in my own Theme i have a “header” Element. And now i need a class if i scroll down the “Content”:

if i scroll in the how can i add a class?

this i my own template

  - type: "custom:button-card"
    template: "card_ing_header"


    class: button-card-header

maybe i can also add a class directly there with javascript?
Or add a class in a other wrapper.

the javascipt maybe like this:

    $(window).scroll(function() {
        if ($(document).scrollTop() > 50) {
        } else {
    console.log('all loaded');

a other question, how can i add this javascript file i my own theme folder, not in “www/javascript/…” ?

thanks all

no one knows how to create something like this? :crossed_fingers: