Script einfügen

Hallo,
ich würde gerne ein Script einfügen, das eine zusätzliche Klasse einen Element beim Scrollen hinzufügt.
Ich bin nicht der Javascriptexperte, habe aber ein Script gefunden und an meine Klassen bzw. ID’s angepasst.
Eingebunden habe ich es in meiner header.tpl, dafür habe ich den Block für das Tracking genutzt:

{extends file='parent:frontend/index/header.tpl'}

{* Block for tracking codes which are required to include in the `head` section of the document *}
{block name="frontend_index_header_javascript_tracking"}

<script>
{literal}
window.onscroll = function() {myFunction()};

var headertop = document.getElementById("topbar");
var sticky = headertop.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    headertop.classList.add("sticky");
  } else {
    headertop.classList.remove("sticky");
  }
}
{/literal}
</script>

{/block}

Folgendes Element soll damit angesprochen werden:

<div id="topbar" class="headertop">

In der Demo des Scripts funktioniert das wunderbar.

Leider funktioniert es im Shop nicht, die Klasse headertop wird beim Scrollen nicht um die Klasse sticky erweitert.
Die literal-Tags habe ich testweise vor und nach den script-Tags gesetzt.

Habe ich irgendwo einen Fehler?
Oder kann ich das anders lösen?

Gruß Michael

Hi Michael,

um ein eigenes Javascript einzubinden, erstellst du eine Datei mit dem Quelltext des Scripts in deinem Custom Theme im Verzeichnis _public/src/js und verweist dann in der Theme.php auf diese. Näheres siehe https://developers.shopware.com/designers-guide/css-and-js-files-usage/.

Danach Theme im Backend neu kompilieren (findest du unter Cache löschen) und schon ist dein Script mit eingebunden.

LG Phil