Полоса прокрутки в боковом меню с использованием прокрутки не работает должным образом c

Question

У меня закодировано боковое меню Sticky, в котором есть полоса прокрутки при прокрутке и используется scrollmagi c .io.

                    <div class="scrollbar">
                        <div id="trigger1"></div>
                        <div class="scrollbar-container" id="pin1">
                            <div id="custom-scrollbar"></div>   
                        </div><!-- end scrollbar-container -->
                    </div><!-- end scrollbar -->    

Полоса прокрутки должна прокручиваться, поскольку рядом с ней прокручивается меню вниз. Для полной структуры HTML, пожалуйста, посмотрите на кодовую ручку в конце.

Это CSS:

/* Products Section Styles */
.img-auto {
  max-width: 100%;
}
.products-section {
    margin-top: 75px;
}
.products-section h2 {
    margin-bottom: 52px;
}
.row-products {
    min-height: 2200px;
}
.col-nav{
    position: sticky;
    top: 0; 
    left:0; 
    padding-left: 65px;
    padding-right: 65px;
}
.products-nav { 
    list-style: none;
    margin: 0;
    padding: 0;
}
.products-nav li {
    margin: 20px 0 50px 0;
}
.products-nav li a {
    display: block;
    text-decoration: none;
    opacity: 0.5;
}
.products-nav li a.active,
.products-nav li a:hover 
{
    opacity: 1;
}
.nav-header {
    display: block;
    color: #1c1f2a;
    font-size: 30px;
    font-family: 'DomaineDisp-SemiBold';
    margin: 0;
}
.nav-text {
    display: block;
    margin: 15px 0 25px 0;
    font-size: 18px;
    line-height: 1.35;
    color: #1c1f2a;
}
.products-section img {
    /*margin-bottom: 150px;*/
    margin-bottom: 50px;
}

.products-buttons {
    display: none;
}
.products-buttons a.btn {
    display: block;
    width: 50%;
    float: left;
    opacity: 1;
    padding: 14px 25px;
}
.products-nav li a.active + .products-buttons {
    display: block;
    padding-bottom: 35px;
}
.scrollbar {
    position: absolute;
    left: -100%;
    top: 30px; /**/
    margin-left: 0px;

}

.scrollbar-container {

}
#custom-scrollbar {
    width: 2px;
    height: 95px;
    background: #ff8256;
    z-index: 10;
    border-radius: 1px;
}

Это код jQuery:

// init controller
        var controller = new ScrollMagic.Controller();

$(function () { // wait for document ready
        // build scene
        var scene = new ScrollMagic.Scene({
            triggerElement: "#trigger1",
            duration: "2100",
            offset: "100"
        })
        .setPin("#pin1")
        .addTo(controller);
    });


// Add smooth scrolling to all links
  $("a").on('click', function(event) {


    if (this.hash !== "") {

      event.preventDefault();


      var hash = this.hash;


      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 400, function(){



      });
    } 
  });



  jQuery(window).scroll(function(){
    var $sections = $('.section');
    $sections.each(function(i,el){
        var top  = $(el).offset().top-50;
        var bottom = top +$(el).height();
        var scroll = $(window).scrollTop();
        var id = $(el).attr('id');
        if( scroll > top && scroll < bottom){
            $('.section.active').removeClass('active');
            $(this).addClass('active');

        }
        if ( $('#product1').hasClass('active') ) {
            $('.products-nav li a').removeClass('active');
            $('.pn1 a').addClass('active');
            $('.scrollbar').removeClass('p2');
            $('.scrollbar').removeClass('p3');
            $('.scrollbar').removeClass('p4');
            $('.scrollbar').addClass('p1');
          }
          if ( $('#product2').hasClass('active') ) {
            $('.products-nav li a').removeClass('active');
            $('.pn2 a').addClass('active');
            $('.scrollbar').removeClass('p1');
            $('.scrollbar').removeClass('p3');
            $('.scrollbar').removeClass('p4');
            $('.scrollbar').addClass('p2');
          }
          if ( $('#product3').hasClass('active') ) {
            $('.products-nav li a').removeClass('active');
            $('.pn3 a').addClass('active');
            $('.scrollbar').removeClass('p1');
            $('.scrollbar').removeClass('p2');
            $('.scrollbar').removeClass('p4');
            $('.scrollbar').addClass('p3');
          }
        if ( $('#product4').hasClass('active') ) {
            $('.products-nav li a').removeClass('active');
            $('.pn4 a').addClass('active');
            $('.scrollbar').removeClass('p1');
            $('.scrollbar').removeClass('p2');
            $('.scrollbar').removeClass('p3');
            $('.scrollbar').addClass('p4');
          }
    })
});

Я сделал кодовую ручку для этого, чтобы увидеть проблему в действии:
https://codepen.io/zestweb/pen/XWJQJqx

Это видео показывает функциональность, которую я ищу для:
https://www.youtube.com/watch?v=LhcBSUAvCMg

Обратите внимание, как оранжевая полоса прокрутки плавно прокручивается на веб-сайте dropbox, но в коде ручки она сначала прокручивается, а затем прекращает прокрутку до конца меню достигнуто.

Я буду активно отвечать на любые комментарии / вопросы.