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