Sticky Header funktioniert nicht

Shopware 6 (German)
1

Servus Leute,

ich fuchse mich gerade in die Theme Erstellung und möchte gerne einen Sticky Header.
So einfach wie in SW5 scheint es nicht zu sein :smiley:

Mit Hilfe von https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript habe ich probiert mir einen StickyHeader zu basteln.

In die main.js habe ich folgendes eingefügt:

import StickyHeader from ‚./scripts/sticky-header‘;
const PluginManager = window.PluginManager;
PluginManager.register(‚FmStickyHeader‘, StickyHeader, ‚body‘);
if (module.hot) {
module.hot.accept();
}

In den entsprechenden scripts Ordner habe ich dann meine Datei sticky-header.js angelegt:

import Plugin from ‚src/plugin-system/plugin.class‘;
export default class StickyHeader extends Plugin {
static options = {
};
init() {
this._registerEvents();
}
_registerEvents() {
var theme_body = $(‚body‘);
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 64 && $( ‚body‘ ).hasClass( ‚stickyheader‘ )) {
theme_body.removeClass(‚unscrolled‘).addClass(‚scrolled‘);
}
else {
theme_body.removeClass(‚scrolled‘).addClass(‚unscrolled‘);
}
});
}
}

Dann in meiner base.html.twig nach dem extenden:

{% block base_body_classes %}{{ parent() }}{% if newAgeSettings.stickyheader %} stickyheader{% endif %}
{% endblock %}

Und natürlich auch die entsprechende scss angelegt und angepasst.

Allerdings läuft es einfach nicht.
Was habe ich falsch gemacht?

Vielen Dank vorab

2

Hallo,

am besten vergleichst du es einfach mit einem bestehenden Plugin für den Zweck: GitHub - sschreier/sschreierStickymenu: A Sticky Menu for Shopware 6. . Da hättest du alles, was du auf jeden Fall an Dateien etc. bräuchtest.

Ein storefront:build hast du gemacht, damit auch die entsprechende kompilierte JavaScript - Datei erzeugt wird?

Grüße
Sebastian

3

Hallo,
erstmal vielen Dank für deine Hilfe und den Tipp.

Ich habe mir bereits meinen Code oben aus einem Theme gezogen, welches auch einen Sticky-Header beinhaltet. Dein Vorschlag ist natürlich auch super, allerdings betrifft das nur die Navigation und ich möchte ja, dass mein gesamter Header sticky ist.
Vllt. versuche ich mit deinem Beispiel ein wenig rumzubasteln.

Leider bin ich echt ein blutiger Anfänger und habe mich erstmal in CSS und HTML reingefuchst. Jetzt noch JS und mir raucht echt der Kopf ;D Andernfalls muss ich mir da irgendwie anderweitig helfen lassen und mir hier ein Plugin schreiben lassen.

storefront:build habe ich natürlich ausgeführt.

Vermute mal, dass es an dem Code in meiner base.html.twig liegt.

Aber nochmals vielen Dank

4

Hallo,
wenn der Header einfach nur oben am Bildschirmrand hängen soll, kannst du es auch ganz einfach mit CSS/SCSS probieren. Dazu fügst du einfach „position: fixed;“ zu den Klassen hin zu, welche oben kleben bleiben sollen. Desweitern kann es sein, dass du noch einen z-index Wert vergeben musst, damit der Header auch beim scrollen über den anderen Inhalten liegt.
Hoffe ich konnte dir helfen.