Yootheme navigation smooth scroll & scrollspy

Für Onepager und In-Seiten-Scrolling. Ergänzt automatisch das scrollen für Einträge in der Main navigation und optional die markierung des aktuell gültigen Menü-Eintrages je nach Scrolltiefe.

Für OffCanvas- und Modal-Menü muss die jeweilige Einstellung aktiviert werden, damit sich das Menü auf Mobilgeräten sauber schliesst und weiter nutzbar ist. Welche Einstellung aktiv ist findest Du unter:
Yootheme > Layout > Mobile> Menu animation

Code

Einfügen in Yootheme > Settings > Custom Code > Script

// set site-wide scrolling offset
UIkit.mixin({data: {offset: 100}}, 'scroll');

// main navigation scroll-stuff
UIkit.util.ready(function () {

    // main navigation scrollspy:
    // mark closest matching navigation item
    UIkit.scrollspyNav('ul.uk-navbar-nav', {closest: 'li', scroll: true});
    
    // main navigation scroll
    // smooth scrolling to anchors
    UIkit.util.$$('.uk-navbar-nav a, .uk-nav a').forEach(function(el) {
        if (location.hostname == el.hostname && location.pathname == el.pathname && el.href.charAt(0) != '#') {
            UIkit.scroll(el, {offset: 90});
            
            UIkit.util.on(el, 'beforescroll', function() {

                // activate only when using menu style modal (Yootheme > Layout > Mobile> Menu animation)
                UIkit.modal('#tm-mobile').hide();
                
                // activate only when using menu style canvas (Yootheme > Layout > Mobile> Menu animation)
                // UIkit.offcanvas('#tm-mobile').hide();
                
            });
        }
    });
});