WebSite X5Help Center

 
Michael G.
Michael G.
User

Header Menü beim hochscrollen erscheinen  de

Автор: Michael G.
Просмотрено 474, Подписчики 1, Размещенный 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.

Размещено
24 Ответы
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ü. 

Читать больше
Размещено От Andreas S.
Michael G.
Michael G.
User
Автор

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

Читать больше
Размещено От Michael G.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца 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?

Читать больше
Размещено От Daniel W.
Michael G.
Michael G.
User
Автор

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

Читать больше
Размещено От Michael G.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца 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.

Читать больше
Размещено От 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!

Читать больше
Размещено От Andreas S.
Michael G.
Michael G.
User
Автор

Wahrscheinlich wird das zu kompliziert.

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

Читать больше
Размещено От 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?

Читать больше
Размещено От 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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Bernhard K.
Bernhard K.
User

@ Michael- zeige bitte was Du meinst

Читать больше
Размещено От Bernhard K.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца 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>

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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

     2 Vorlage > StickyBar

-----

Читать больше
Размещено От Daniel W.
Michael G.
Michael G.
User
Автор

Ja so meinte ich das @Andreas und @Daniel

Читать больше
Размещено От Michael G.
Michael G.
Michael G.
User
Автор

@Daniel

Ich habe jetzt deinen Code eingefügt. Aber beim hochscrollen erscheint nicht das Menü

https://regotent-zelte.de/test02/

Читать больше
Размещено От 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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Автор

@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

Читать больше
Размещено От 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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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

-----

-----

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца EN

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

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца DEЛучший пользователь месяца 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.

Читать больше
Размещено От 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

.

Читать больше
Размещено От  ‪ 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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪