固定div滚动，但不超过页脚

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;
}