Проблема со скролом и позиционированием
 

Здравствуйте, пытаюсь воссоздать технику работы меню, как на сайте citiлинк.ru , link латиницей, во избежании ссылки на этот форум, пытаюсь делать так, вывел событие сролла вниз и вверх, но пока вышло что то кривое при скроле от верха вниз

sdb.css('top', - scrolledFromtop + 'px')

Прошу помощи в том, что не могу придумать как отловить, т.е сделать возможность скролить в обратном направлении, т.е от низа к верху, целую ночь потратил на это, думаю тут дело в паре строк кода, буду благодарен за помощь

$.fn.sdboxScroll = function(options) {
    
       //Значения по умолчанию
       options = $.extend({ 
           
           lastScrollTop:0,
           lastsdb: $('.sdbox').outerHeight()
           }, options); 
    

       return this.each(function(){
           
          var $this = $(this);
          
          gsScr = function() {
          var sdb = $('.sdbox');
          var wh = $(window).outerHeight();
          var scrolledFromtop = $(window).scrollTop();
          var sdbh = sdb.outerHeight();
          var logh = $('.logo').outerHeight();  
          var mm = $('.main_menu').outerHeight();
          var fromTopPx = logh + mm - wh + 12 ; // distance to trigger
                 
           var st = $(this).scrollTop();  
           if (scrolledFromtop > options.lastScrollTop){
            if(!sdb.hasClass('unscr')) {
             sdb.height(sdbh + st)    
             sdb.css('top', - scrolledFromtop + 'px')
           } 
                     
        } else {
            // sdb.height(options.lastsdb);    
             sdb.css('top', + scrolledFromtop + 'px')
        }
          options.lastScrollTop = scrolledFromtop;
          
           if(scrolledFromtop >= fromTopPx  ){
         sdb.addClass('unscr');
         } else {
          sdb.removeClass('unscr'); 
        }
        
        $('.debug').text(sdb.css('top'))
                
            }
            
        $(window).on('scroll',function() {
               gsScr()
        }).resize(function() {
            gsScr()
        });
        $('document').on('load',function() {
               gsScr()
        });
          

           
       });
       
   }; 
})(jQuery);