/* CSS */
#navigation-menu {
            position: fixed;
            left: 100px;
            top: 100px;
            width: 300px;
        }

        .header-menu .title {
            background: #eee8db;
            text-indent: 10px;
        }

        .header-menu .subheader-menu {
            text-indent: 20px;
            font-size: 0.8em;
        }

        .header-menu .title:hover,
        .header-menu .subheader-menu:hover {
            text-decoration: underline;
            cursor: pointer;
        }

        .header-menu #active {
            color: red;
        }
/* HTML */
<div id="navigation-menu">
            <div class="header-menu">
                <div class="title" id='active'>Заголовок 1</div>
                <div class="subheader-menu" id='active'>Подпункт 1</div>
                <div class="subheader-menu">Подпункт 2</div>
                <div class="subheader-menu">Подпункт 3</div>
                <div class="subheader-menu">Подпункт 4</div>
            </div>
            <div class="header-menu">
                <div class="title">Заголовок 2</div>
                <div class="subheader-menu">Подпункт 1</div>
                <div class="subheader-menu">Подпункт 2</div>
            </div>
            <div class="header-menu">
                <div class="title">Заголовок 4</div>
                <div class="subheader-menu">Подпункт 1</div>
                <div class="subheader-menu">Подпункт 2</div>
                <div class="subheader-menu">Подпункт 3</div>
                <div class="subheader-menu">Подпункт 4</div>
                <div class="subheader-menu">Подпункт 5</div>
                <div class="subheader-menu">Подпункт 6</div>
                <div class="subheader-menu">Подпункт 7</div>
            </div>
        </div>

/* JAVASCRIPT */
$(function() {

    /*$(".accordion dd").hide().prev().click(function() {
        $(".accordion dd").not(this).slideUp();
        $(this).next().not(":visible").slideDown();
        $(".accordion .c-menu-acc").slideUp();
    });

    $(".accordion .c-menu-acc").hide().prev().click(function() {
        $(".accordion .c-menu-acc").not(this).slideUp();
        $(this).next().not(":visible").slideDown();
    });*/

})

/*$(".h-menu-acc").each( function() {
    console.log( this.innerHTML );
} );*/

let headers = [];

$(".accordion dl").each( function() {
    let header = this.getElementsByTagName('dt')[0];
    let subheader = this.getElementsByClassName('h-menu-acc');

    let new_header = {
        'title': header,
        'subheader': subheader
    };
    headers.push( new_header );
} );

let $window = $(window);
$window.on('load scroll', function() {
    let top = $window.scrollTop();
    let height = $window.height();
    let y = top + height / 2;

    let found_i = -1;
    let found_k = -1;

    for ( let i = 0; i < headers.length; i++ )
    {
        if ( y >= headers[i]['title'].offsetTop )
        {
            found_i = i;
            found_k = -1;
        }

        for ( let k = 0; k < headers[i]['subheader'].length; k++ )
        {
            if ( y >= headers[i]['subheader'][k].offsetTop )
                found_k = k;
        }
    }

    if ( found_i == -1 )
        found_i = 0;

    console.log( found_i, found_k );
    select_tab( found_i, found_k );
    update_navmenu();
});

update_navmenu();

function select_tab( h, s )
{
    for ( let i = 0; i < headers.length; i++ )
    {
        headers[i]['active'] = false;
        headers[i]['active_sub'] = -1;

        if ( i == h && s == -1 )
            headers[i]['active'] = true;
        else if ( i == h )
            headers[i]['active_sub'] = s;
    }
}

function navmenu_to( h, s ) {
    if ( s < 0 )
        headers[h]['title'].scrollIntoView( { block: "center", inline: "center", behavior: 'smooth' } );
    else
        headers[h]['subheader'][s].scrollIntoView( { block: "center", inline: "center", behavior: 'smooth' } );
}

function update_navmenu()
{
    let navmenu = document.getElementById('navigation-menu');
    let html = '';

    for ( let i = 0; i < headers.length; i++ )
    {
        html += '<div class="header-menu"><div class="title" onclick="navmenu_to(' + i + ',-1)"';

        if ( headers[i]['active'] )
            html += 'id="active"'

        html += '>' + headers[i]['title'].innerHTML + '</div>'

        for ( let k = 0; k < headers[i]['subheader'].length; k++ )
        {
            html += '<div class="subheader-menu" onclick="navmenu_to(' + i + ', ' + k + ')"';

            if ( headers[i]['active_sub'] == k )
                html += 'id="active"';

            html += '>' + headers[i]['subheader'][k].innerHTML + '</div>';
        }

        html += '</div>'
    }
    navmenu.innerHTML = html;
}