Как сделать прокрутку горизонтального меню при прокрутке страницы по вертикали?

Question

[hottab_1]

Используется библиотека jquery последний версии.
Задача заключается в следующем:
Есть горизонтальное меню с прокруткой, то есть элементы уходят за экран. Ссылки в меню сделаны якорями и ведут на блоки на странице.
Сейчас есть отслеживание элемента меню при прокрутке по странице, то есть если блок находится на экране вверху, пункту меню присваивается класс "active", при прокрутке ниже класс переходит другому пункту, в соответсвии с блоком.

Но появляется проблема - при прокрутке ниже по сайту - не двигается меню (горизонтальное), то есть становится не видно, какой пункт меню сейчас.

Попытался реализовать отслеживание через вот такую конструкцию:

jQuery(window).scroll(function(){
        var scrollToOld = 0;
        var $sections = $('section');
        $sections.each(function(i,el){
            var top  = $(el).offset().top-10;
            var bottom = top +$(el).height();
            var scroll = $(window).scrollTop();
            var id = $(el).attr('id');
            if( scroll > top && scroll < bottom){
                $('a.active--products-category-menu').removeClass('active--products-category-menu');
                $('a[href="#'+id+'"]').addClass('active--products-category-menu');

                var idElement = $('a[href="#'+id+'"]').attr('id');

                var iddiv = $('.active--products-category-menu').parent().attr("id");
                //var iddiv = $('.active--products-category-menu').parent().attr("id");
                var scrollTo = $('#'+idElement).offset().left;
                var link = $('a[href="#'+id+'"]');

                $( ".wrapper-product-category-menu" ).scrollLeft( scrollTo );

                console.log('ID элемента секции id '+id);
                console.log('Координаты scrollTo '+scrollTo);
                console.log('ID элемента idElement '+idElement);
                console.log('ID родителя iddiv '+iddiv);
                console.log('#'+idElement);

Но при отладке вижу, что координаты scrollTo (позиция элемента на странице) - всегда разное, из-за этого происходит вот такая вещь:
https://cloud.mail.ru/public/ktLo/Mj9gyg3PX

Из-за разных координат меню начинает прыгать.

Хотелось бы понять:
1. Почему координаты разные, что с ними происходит?
2. Как в целом правильно реализовать задумку? Пример, как это выглядит в яндекс еде в приложении:
https://cloud.mail.ru/public/MdQu/nLpdRauoH

Код в песочнице: https://codepen.io/uhesfyft-the-encoder/pen/YzMqajW

Comments

[Ivan Ustûžanin]

сделайте песочницу, а то из кода, где обращения такое впечатление что идут рандомно — лишь бы к чему-то, не совсем понятно, что есть что

[hottab_1]

IvanU7n, https://codepen.io/uhesfyft-the-encoder/pen/YzMqajW