Hallo,
ich habe keine Ahnung wie man das gesuchte Feature nennt, aber ich habe im Forum nix gefunden.
Ich nenne es mal „Fly-In Header beim Hochscrollen“.
Also ich würde gerne den Header beim Hochscrollen automatisch einblenden lassen, so wie das hier geschieht:
https://www.geliebtes-zuhause.de/
Wenn man weit nach unten gescrollt hat und dann wieder nach oben scrollt, wird der Header wieder eingeblendet.
Wie geht das? (und wie nennt man das)?
Danke und viele Grüsse,
Jens
Hallo,
ich habe keine Ahnung wie man das gesuchte Feature nennt, aber ich habe im Forum nix gefunden.
Ich nenne es mal „Fly-In Header beim Hochscrollen“.Also ich würde gerne den Header beim Hochscrollen automatisch einblenden lassen, so wie das hier geschieht:
https://www.geliebtes-zuhause.de/
Wenn man weit nach unten gescrollt hat und dann wieder nach oben scrollt, wird der Header wieder eingeblendet.
Wie geht das? (und wie nennt man das)?
Danke und viele Grüsse,
Jens
Hallo,
also der Shopware - Store nutzt den „Sticky Menü“ - Effekt, das Erweiterte Menü bleibt also oben beim Scrollen „anheften“: Suchergebnis für sticky menü | Shopware Store + eine Indiviuallösung, das beim Scrollen nach oben der Header wieder komplett geöffnet ist. geliebtes-zuhause.de dagegen nutzt eine andere Variante, wo das Erweiterte Menü nicht standardmäßig „heften“ bleibt, sondern nur, wenn man noch oben scrollt. Das sind beides wahrscheinlich Individuallösungen, da es diesen Effekt ansich so nicht gibt, da er auch eher „ungewöhnlich“ für den Nutzer ist. Sonst kannst du ja einfach einmal einen der Hersteller anschreiben, ob Sie nicht eines Ihrer Plugins, das dich am meisten überzeugt, dahingehend erweitern können.
Beste Grüße
Sebastian
Danke für die Antwort zu so später (oder besser früher) Stunde.
Diesen Flyout Effekt von geliebtes-zuhause habe ich schon öfter gesehen und finde ihn sehr gut, da er das Hochscrollen erspart. Es hält die Besucher sicherlich länger auf der Seite.
Muss mir mal ansehen, wie das umgesetzt ist. Mir fehlt dazu noch ein griffiger Suchbegriff, denn das scheint eine bekannte Technik zu sein.
Gruss
Jens
Hallo,
falls es jemanden interessiert: Ich habe herausgefunden, wie der Flyin Header beim Hochscrollen auf der oben genannten Seite funktioniert:
Im Header wird dynamisch eine CSS Klasse hinzugefügt, welche die aktuelle Scrollrichtung angibt:
=> wenn die Seite nicht gescrollt wurde
=> wenn die Seite nach unten gescrollt wird
=> wenn die Seite nach oben gescrollt wird und der Flyin Header angezeigt werden soll.
Diese dynamische Anpassung der Headerklasse geschieht durch dieses Javascript:
( function ( ) {
'use strict';
// ~ Private
var _ticking = false;
var _scrollY = 0;
var _lastScrollY = 0;
var _lastSlideDirection = '';
var _onBreakpoints = 'm-l-xl';
var _htmlElement = document.getElementById('js_main-header');
var _scrollFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
// IE Fallback, you can even fallback to onscroll
function(callback){ window.setTimeout(callback, 1000/60); };
var _handleClass = function() {
var slideDirection = '',
slideReverseDirection = '';
if ( _scrollY > 0 ) {
if ( _scrollY > _lastScrollY ) {
slideDirection = 'down';
slideReverseDirection = 'up';
} else if ( _scrollY < _lastScrollY ) {
slideDirection = 'up';
slideReverseDirection = 'down';
} else {
slideDirection = _lastSlideDirection;
slideReverseDirection = ( slideDirection === 'up' ? 'down' : 'up' );
}
if ( slideDirection !== _lastSlideDirection ) {
_htmlElement.classList.add( 'slide--' + slideDirection );
_htmlElement.classList.remove( 'slide--' + slideReverseDirection );
}
} else {
_htmlElement.classList.remove( 'slide--up', 'slide--down' );
}
_ticking = false;
_lastScrollY = _scrollY;
_lastSlideDirection = slideDirection;
};
var _unwantedBreakpoint = function() {
return _onBreakpoints.indexOf( WLS.getBreakpoint() ) === -1;
};
var _handleScroll = function() {
if ( _unwantedBreakpoint() ) {
window.removeEventListener('scroll', _onScroll, false);
} else {
window.addEventListener('scroll', _onScroll, false);
}
};
function _requestTick() {
if ( ! _ticking ) {
_scrollFrame( _handleClass );
_ticking = true;
}
}
var _onScroll = function() {
_scrollY = window.scrollY || window.pageYOffset;
_requestTick();
};
// debulked onresize handler
var _smartResize = function(c, t) {
window.onresize = function() {
clearTimeout(t);
t = setTimeout(c, 100);
};
return c;
};
// ~ Public
_smartResize( _handleScroll )();
} )( );
Dann wird der Flyin-Effekt für das Hochscrollen noch im CSS definiert:
.main-header.slide--up .main-header__wrapper {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.main-header__wrapper {
height: 150px;
}
.main-header__wrapper {
height: 114px;
}
.main-header__wrapper {
-webkit-transition-property: transform;
-webkit-transition-duration: 250ms;
-webkit-transition-timing-function: linear;
transition-property: transform;
transition-duration: 250ms;
transition-timing-function: linear;
left: 0;
right: 0;
position: absolute;
will-change: transform;
}
Gar nicht so schwer. Vielleicht bastele ich mal ein Plugin daraus.
Viele Grüsse,
Jens
P.S.: Wie verhindert man eigentlich, dass im Code hier das kleiner Zeigen durch < ersetzt wird?