Ein herzliches Hallo in dieses Forum!
Ich bin, wie man sieht, in diesem Forum neu, leider auch, was Joomla angeht. Mit Joomla habe ich erst vor ein paar Wochen begonnen. Komme auch sehr gut zurecht, auch wenn es manchmal etwas hackt und das nur in meinem Kopf. Mit HTML, CSS, PHP und auch ein wenig Java für den Hausgebrauch bin ich ein büschen vertraut.
Mein Ziel in Joomla:
Ich möchte gerne das der Header der Homepage beim Scrollen langsam nach oben unter der Menüleiste verschwindet und beim rauf Scrollen wieder sichtbar wird.
Halt wie ein Rollo am Fenster.
Ich habe die letzten Tage im Netz gesucht, ob ich eine Lösung dafür find, doch habe ich nicht wirklich etwas Adäquates für meine Problemlösung gefunden.
In einer statischen Homepage habe ich das vorher ausprobiert mit Erfolg.
Warum nicht in Joomla?
Das Ganze besteht nur aus einem Script, was in der index.php oder auch in eine index.html Datei am Ende über dem schließenden Body tag eingetragen wird.
(Siehe Beispiel)
<script>
var lastScrollTop = 0;
$(window).scroll(function (event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
if (!$('body').hasClass('down')) {
$('body').addClass('down');
}
} else {
$('body').removeClass('down');
}
lastScrollTop = st;
if ($(this).scrollTop() <= 0) {
$('body').removeClass('down');
};
});
</script>
</body></html>
In der CSS Datei gebe ich an was ich ansprechen möchte und wie der Header sich verhalten soll.
.down header {
transform: translate3d(0, -179px, 0);
}
.header {
margin: 34px auto;
background-repeat: no-repeat;
transition: 2.4s;
overflow: hidden;
height: 225px;
top: 0%;
width: 100%;
position: fixed;
background-image: url('images/header.png');
background-position: center top;
z-index: 10;
}
Sobald ich dieses in der index.php und in der template.css unter Joomla einsetzte, wird beim Scrollen der Header nicht nach oben verschoben.
Vielleicht habe ich auch nur einen Nagel im Kopf und sehe die Lösung nicht mehr. Ich würde mich freuen, wenn mir jemand helfen könnte.
Mit freundlichen Grüßen
Giftmütze