Jquery 修正了滚动条上的Div，但不超过页脚

我需要一个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);
                  }
                });
            }
        };

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