Super einfaches „Sticky Menü“ für Shopware

Sticky Menues sind praktisch – das Menü einer Seite bleibt oben stehen. So kann der Besucher jederzeit auf einer Webseite navigieren, ohne wieder nach oben scrollen zu müssen. Für Shopware haben wir hier einen simplen Code, der dies ermöglicht.
Folgenden Code in einer Javascript Datei hinterlegen:

var  menu = $(".navigation-main");
    menuscrolled = "main-nav-scrolled";
    headr = $('.header-main').height();
	wdth= $('.container').width();

$(window).scroll(function() {
  if( $(this).scrollTop() > headr ) {
    menu.addClass(menuscrolled);
    menu.css('width', wdth+'px');
  } else {
    menu.removeClass(menuscrolled);
  }
});

zusätzlich noch folgendes CSS ergänzen:

nav.navigation-main.main-nav-scrolled {position: fixed;
 z-index:9999;
   top: 0px;
   margin-top:0px;}

That’s all folkes 😉
gefunden hier und für Shopware angepasst.

Falls Sie Hilfe bei Ihrer Shopware Installation benötigen oder Template-Anpassungen oder Updates durchgeführt werden sollen, dann freuen wir uns natürlich Ihnen helfen zu können!

Gerne machen wir Ihnen auch ein Angebot für die Migration von Shopware 5 auf Shopware 6

sven

sven

Nach oben