Spacious-Theme anpassen

Hallo Leute,

ich möchte das bei dem Spacious-Theme der Container mit der ID: masthead fixiert wird wenn top:0px . Ich möchte folgenden JavaScript-Code benutzen:

<script>
    document.addEventListener('scroll', function(){
    if(window.pageYOffset >= 200){
        console.log('Zu Top sind es mehr oder gleich 200px');
        document.getElementById('header-text-nav-container').className = 'fixed';
        document.getElementById('main').className = 'clearfix top0';
    }else{
        console.log('Zu Top sind es weniger als 100px');
        document.getElementById('header-text-nav-container').className = '';
        document.getElementById('main').className = 'clearfix';
    }
        //console.log(window.pageYOffset);
    });
   </script>

Diesen habe ich an das Ende der page.php geschrieben. Und die style.css um folgende Klassen erweitert

.fixed {
    position:fixed;
    top:0;
    z-index:10;
}


.top0 {
    top: 100px;
}

Aber so läuft es noch nicht. Kann mir jemand bitte helfen?

Ja, stimmt. Mit mehr Inhalt funktioniert es. Schonmal Danke aber jetzt habe ich noch das Problem das der Inhalt von header-text-nav-container nach ganz Links "wandert"...

Mit mehr Inhalt funktioniert es. Aber Jetzt habe ich das Problem dass sobald ich einmal gescrollt habe so dass die Navigation einmal fixiert wurde anschließend ein div#main unter der Navigation sichtbar wird... Hat jemand eine Idee?

Das mit dem div#main lag an der clearfix klasse. Aber warum bleibt der Inhalt von header-text-nav-container nicht an der vorherigen stelle?