Eigenes Javascript einfügen

Shopware 5 Themes & Design
1

Hallo,

ich habe schon einiges gelesen und denke das ich es richtig umsetze, trotzdem hakt es irgendwo…

Ich möchte gerne die Navigation beim Scrollen oben fixieren. Folgendes habe ich gemacht:

in -> themes/Frontend/MeinTheme/frontend/_public/src/js/ -> neue Datei erstellt: fixednav.js mit folgenden Inhalt:

$(document).ready(function () {
    $(window).bind('scroll', function () {
        var navHeight = $(window).height() - 70;
        if ($(window).scrollTop() > navHeight) {
            $('navigation-main').addClass('fixed');
        }
        else {
            $('navigation-main').removeClass('fixed');
        }
    });
});

in -> themes/Frontend/MeinTheme/Theme.php -> folgendes eingetragen:

Leider wird die Class fixed nicht der Main-Navigation hinzugefügt.
Kann mir jemand sagen was ich verkehrt mache?

Gruß Michael

2 
document.asyncReady(function() {
   ....
})

statt

$(document).ready(function () {
   ...
})

 

3 
document.asyncReady(function () {
    $(window).bind('scroll', function () {
        var navHeight = $(window).height() - 70;
        if ($(window).scrollTop() > navHeight) {
            $('navigation-main').addClass('fixed');
        }
        else {
            $('navigation-main').removeClass('fixed');
        }
    })
});

Funktioniert leider auch nicht.

Liegt es vielleicht daran das ich lokal über XAMPP entwickle?

4 
.navigation-main

statt

navigation-main

 

5

Hatte ich auch schon getestet, es will einfach nicht funktionieren.

Habe es jetzt mit CSS umgesetzt:

        position: -webkit-sticky;

        position: sticky;

        top: 0;

Waren noch einige weitere CSS-Anpassungen notwendig, passt jetzt aber.