Bereichsnavigation - Navigation nur beim Hochscrollen Anzeigen
Sie können das Verhalten der Bereichsnavigation (wglKeepInsideTopOnScroll) manipulieren, sodass sie nur beim Hochscrollen sichtbar wird.
Auszug aus der desing.js
////////////////////////////////////////////////////////////////
//
// Beim Scrollen
//
////////////////////////////////////////////////////////////////
jQuery(window).on('scroll', function(){
/* Auslesen des Scrollstatus aus der globalen JS-Variable wUiTmp [scrollup,top,scrolldown]
Ermitteln des Elements, der Bereichsnavigation.
In diesem Fall wurde über -w-add-classes:wglKeepInsideTopOnScrollTop die CSS-Klasse in der Darstellungsvariante gesetzt.
Der Klassenname ist individuell wählbar.
Setzen oder Löschen der Klasse wglKeepInsideTopOnScroll, die für die Funktion wKeepInsideTopOnScroll das Ausgangselement "markiert".
*/
if(wUiTmp['lastScrollStatus'] == 'scrollup'){
jQuery('.wglKeepInsideTopOnScrollTop').addClass('wglKeepInsideTopOnScroll');
wKeepInsideTopOnScroll();
}
else if(wUiTmp['lastScrollStatus'] != 'scrollup'){
jQuery('.wglKeepInsideTopOnScrollTop').removeClass('wglKeepInsideTopOnScroll');
}
});
Auszug aus der elementNavigationSection.scss
/*@wCssFragment{class:elementNavigationSections;variant:0;caption:Horizontale Bereichsnavigation;caption-en:In page navigation horizontally}*/ .elementNavigationSections_var0 { -w-add-classes:wglKeepInsideTopOnScrollTop; /*Script dazu in der design.js, Klassenname frei wählbar*/ ... }
Wenn sich die Navigation in der mobilen Ansicht unterschiedlich verhalten soll, empfiehlt es sich, die Funktionen mediaquery_viewport_[]_onactivate in der design.js einzusetzen.
Auszug aus der desing.js
/*
Bitte passen Sie das Beispiel auf Ihre individuellen Gegebenheiten an.
*/
mediaquery_viewport_m_min_onactivate = function(){
jQuery(window).on('scroll', function(){
if(wUiTmp['lastScrollStatus'] == 'scrollup'){
jQuery('.wglKeepInsideTopOnScrollTop').addClass('wglKeepInsideTopOnScroll');
wKeepInsideTopOnScroll();
}
else if(wUiTmp['lastScrollStatus'] != 'scrollup'){
jQuery('.wglKeepInsideTopOnScrollTop').removeClass('wglKeepInsideTopOnScroll');
}
});
};
mediaquery_viewport_l_min_onactivate = function(){
jQuery(window).on('scroll', function(){
jQuery('.wglKeepInsideTopOnScrollTop').addClass('wglKeepInsideTopOnScroll');
});
};