How add a class - if i scroll down?

Configuration Frontend
1

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"

template:

  card_mod:
    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:

$(document).ready(function(){
    $(window).scroll(function() {
        if ($(document).scrollTop() > 50) {
            $('ha-panel-lovelace').addClass('scrolled');
        } else {
            $('ha-panel-lovelace').removeClass('scrolled');
        }
        console.log(console);
    });
    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

2

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