Исправлен Div на Scroll, но не выше нижнего колонтитула

Question

Мне нужно, чтобы div изменил положение на фиксированное после прокрутки заголовка вне поля зрения. Но мне также нужно, чтобы div не проходил через нижний колонтитул внизу. Я начал с угловой директивы для первой части, но не могу понять, как предотвратить переход div через нижний колонтитул.

Я попытался добавить jquery, но он не работает идеально, плюс я хотел получить чисто угловое решение, если это возможно:

 var a=$(document).scrollTop()+window.innerHeight;
 var b=$('#footer').offset().top;

          if($('#cart').offset().top + $('#cart').height()
            >= $('#footer').offset().top - 20){
            $( "#cart" ).removeClass( "top-position-cart" )
            $('#cart').css('bottom', (10+(a-b))+'px');
          }else{
              $( "#cart" ).addClass( "fixed-cart" );
            }

        var directive = {
            restrict: 'A',
            scope: {
                offset: '@',
                scrollClass: '@'
            },
            link: function (scope, element) {
                angular.element($window).bind('scroll', function () {
                    if (this.pageYOffset >= parseInt(scope.offset)) {
                        element.addClass(scope.scrollClass);
                  } else {
                        element.removeClass(scope.scrollClass);
                  }
                });
            }
        };

  <div id="cart" change-class-on-scroll offset="380" 
       scroll-class="fixed-cart top-position-cart>

  </div>

.fixed-cart {
    position: fixed;
}
.top-position-cart {
  top: 15px;
}