WebSite X5Help Center

 
Michael G.
Michael G.
User

Header Menü beim hochscrollen erscheinen  de

Auteur : Michael G.
Visité 480, Followers 1, Partagé 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.

Posté le
24 RéPONSES
Andreas S.
Andreas S.
Moderator

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ü. 

Lire plus
Posté le de Andreas S.
Michael G.
Michael G.
User
Auteur

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

Lire plus
Posté le de Michael G.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

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?

Lire plus
Posté le de Daniel W.
Michael G.
Michael G.
User
Auteur

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

Lire plus
Posté le de Michael G.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

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.

Lire plus
Posté le de Daniel W.
Andreas S.
Andreas S.
Moderator

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!

Lire plus
Posté le de Andreas S.
Michael G.
Michael G.
User
Auteur

Wahrscheinlich wird das zu kompliziert.

Ich meine beim Hochscrollen soll das Menü wieder erscheinen und beim runterscrollen weg gehen (wie normal)

Lire plus
Posté le de Michael G.
Andreas S.
Andreas S.
Moderator

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?

Lire plus
Posté le de Andreas S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Michael G.
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.

(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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Bernhard K.
Bernhard K.
User

@ Michael- zeige bitte was Du meinst

Lire plus
Posté le de Bernhard K.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

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>

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

Nachtrag: Die StickyBar auf der Testseite habe ich abgeschaltet in WebSite X5 unter ...

     2 Vorlage > StickyBar

-----

Lire plus
Posté le de Daniel W.
Michael G.
Michael G.
User
Auteur

Ja so meinte ich das @Andreas und @Daniel

Lire plus
Posté le de Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Auteur

@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

Lire plus
Posté le de Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

Von meiner vorgestellten Version ist nur die Hälfte des Javascript-Code verhanden, siehe

-----

-----

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

Sorry - offenbar wurde der Code von KolAsim getestet, dann auf KolAsim warten.

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

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.

Lire plus
Posté le de Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Michael G.
Ich habe es noch mal hoch geladen.  https://regotent-zelte.de/test02/

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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Daniel W.
Achtung bei Nutzung vom Javascript-Code ! ! ! ... ... ... 

... 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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪