Header Menü beim hochscrollen erscheinen 
Autor: Michael G.
Visited 476,
Followers 1,
Udostępniony 0
Hallo,
auf vielen Webseiten ist es so, wenn man nach unten scrollt, dann scrollt das Menü mit Header auch weg.
Wenn man dann wieder nach oben scrollt, erscheint das menü wieder. Das ist nicht das Sticky.
Hat jemand eine Idee oder Code, wie man sowas machen kann? Es muss ja dann bei jeder Responsiv Größe sein.
Posted on the

Was meinst du genau? Willst du die Stickyleiste aktivieren oder nicht! Sobald du unter "2" die Stickybar mit einem Menü bestückst, dann kommt nach dem Scrollen wieder das Menü.
Autor
Nein ich meine nicht Sticky, ich meinte den richtigen Header mit Menü.
Ich habe auch viele Seiten gesehen, wenn man nach unten scrollt dann scrollt ja der Header weg, und wenn man noch oben scrollt kommt der Header wieder
Das ist doch der Normalfall, dass der Header beim Scrollen nach unten verschwindet.
Oder ist da etwas ganz anderes gemeint? Gibt es Beispielseiten dafür?
Autor
Ja so soll es auch sein, aber beim wieder hochscrollen mit der Maus soll der Header wieder erscheinen, so das der Kunde, auch wenn er nicht ganz oben ist, sofort aufs Menü zugreifen kann
Da müssten sich mal die CSS- und Javascript-Experten melden, denn mit den Code-Beispielen im Internet hat es bei mir leider nicht geklappt.
Wenn das Menü wieder auftauchen soll wenn man runterscrollt, dann ist das mit der Stickybar möglich!
Das einige was ich mir vorstellen kann, dass gleich das Menü oben fixiert ist!
Autor
Wahrscheinlich wird das zu kompliziert.
Ich meine beim Hochscrollen soll das Menü wieder erscheinen und beim runterscrollen weg gehen (wie normal)
Jetzt weis ich was du meinst. Also wenn du noch nicht ganz nach oben gescrollt bist, soll dennoch das Menü schon vorher erscheinen, oder? Sowas ähnliches wenn man runterscrollt und wenn man stehen bleibt oder raufscrollt, dass es nach einer Sekunde erscheint?
(It > De) ...Wenn Sie den Link zu diesen Beispielen online stellen, könnten wir sie uns vielleicht ansehen und so besser verstehen, worum es geht, ohne Annahmen treffen zu müssen....
.
ciao
.
@ Michael- zeige bitte was Du meinst
Ich konnte jetzt den gefundenen Code so ändern und einbauen können, dass er funktioniert.
Meine Testseite >>https://findelinks.de/123test-aufklappmenue-2/
Den Code habe ich hier gefunden, siehe
>> https://kulturbanause.de/blog/navigation-runterscrollen-verstecken-hochscrollen-anzeigen/
A) Meine Änderungen im Code:
Geändert im CSS-Teil 2x nav zu header und bei background um !important erweitert.
Den Javascript-Code habe ich unverändert übernommen.
Entweder die Codes unten kopieren oder von kulturbanause.de kopieren und selber ändern.
B) Kleine Anleitung:
Den Code in WebSite X5 einbauen unter ...
1 Einstellungen > Statistik und Code / Code
... und zwar in diesen Bereichen ...
Benutzerdefinierter Code:
Vor dem >/HEAD> Tag
<style>
header {
z-index: 1000000;
height:100px;
background:pink !important; // Hier Hintergrundfarbe eintragen
position: fixed;
top:0;
right:0;
left:0;
transition: transform .25s .1s ease-in-out;
}
.down header {
transform: translate3d(0, -100px, 0); // um 100px nach oben verschieben
}
</style>
Benutzerdefinierter Code:
Vor dem </BODY> Tag
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<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>
Nachtrag: Die StickyBar auf der Testseite habe ich abgeschaltet in WebSite X5 unter ...
2 Vorlage > StickyBar
-----
... etwas Ähnliches, aber in umgekehrter Richtung, war hier bereits geschehen:
https://helpcenter.websitex5.com/pl/post/273075
.
Autor
Ja so meinte ich das @Andreas und @Daniel
Autor
@Daniel
Ich habe jetzt deinen Code eingefügt. Aber beim hochscrollen erscheint nicht das Menü
https://regotent-zelte.de/test02/
...entfernen(!) Sie die SCRIPT-Deklaration, die Sie am Ende des BODY-Bereichs vor dem Steuerungsskript eingefügt haben, da sie Konflikte verursacht:
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="crossorigin="anonymous"></script>
----------------------
... entfernen Sie die STYLE-Anweisung in /HEAD, die Sie nach meinem Code eingefügt haben, und ersetzen Sie sie durch folgenden Code:
<style>
#imHeader {position: fixed; width:100%;transition: transform .25s .1s ease-in-out;z-index:5;}
.down #imHeader {
transform: translate3d(0, -120px, 0);}
</style>
.
ciao
.
Autor
@KolAsim
mit dem Code wird der Header fixiert, so meinte ich das nicht. Das was Daniel gemacht hat war schon gut, aber der Header kam beim hochscrollen nicht zurück
ciao, ... Ich habe nachgesehen, und die Änderungen sind noch nicht vorgenommen.
Ich habe es gerade direkt auf Ihrer TEST2-Webseite getestet, und der von mir gepostete Code hat funktioniert.
Die Kopfzeile verschwindet oben und erscheint wieder, wenn man nach oben scrollt.
.
ciao
.
Autor
Ich habe es noch mal hoch geladen.
https://regotent-zelte.de/test02/
Von meiner vorgestellten Version ist nur die Hälfte des Javascript-Code verhanden, siehe
-----
-----
Sorry - offenbar wurde der Code von KolAsim getestet, dann auf KolAsim warten.
Achtung bei Nutzung vom Javascript-Code ! ! !
Bei mir hat der oben gepostete Javascript-Code die Funktion des Objekts "Flipbook" verhindert.
Ein anderer Javascript-Code hat bei mir die Anzeige des Warenkorbs im Shop verhindert.
Sie haben das falsche Skript entfernt, nicht das, das ich zuvor angegeben habe. Das von mir angegebene Skript könnte mit den Programmfunktionen in Konflikt stehen und muss daher entfernt werden.
... und Sie müssen den Steuercode für den HEADER wiederherstellen. Dieser lautet:
<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>
............................
ciao
.
... Sie müssen das Skript löschen, auf das ich Michael G. vorhin hingewiesen habe, das für Ihre STAMP; ...es könnte mit Programmfunktionen in Konflikt geraten, und Sie müssen es löschen...
.
ciao
.