Html 如何在angularjs中使固定浮动按钮停止在页脚

我想创建一个按钮使用浮动，直到页脚，然后停止

1） 按钮应

位置：固定底部：当页脚不可见时为0px

2） 当页脚可见时，按钮应该正好位于页脚的顶部

该按钮应处理以下情况。
当状态在角度上发生变化时，当我们从服务器获取数据时，页脚会暂时可见，然后页面会展开，然后会发生什么

当页面内容较少且页脚可见时，按钮应位于页脚顶部

我该怎么做

这就是我开始玩弄的那个小家伙

通过修改
style.css
，您可以完全不使用angular来实现此效果。这种情况下最简单的解决方案就是将
#to top
元素的
bottom
参数设置为至少高于页脚，例如：

 #to-top {
  position:fixed;
  bottom: 60px;
  right: 10px;
  width: 100px;
  padding: 5px;
  border: 1px solid #ccc;
  background: red;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;

}

我在寻找类似的解决方案时遇到了这篇文章。在没有现成答案的情况下，根据这篇文章，我最终就是这么做的

基本上，您需要一个
$scope.$watch
来监视范围更改，以及一个附加到
onscroll
事件的事件处理程序

angular.module('myApp')
.directive('stickyBottom', function($window) {
  return {
    restrict: 'A',
    scope: {},
    link: function (scope, elem, attrs) {
      // the element box saved for later reference
      var elemRect;
      // element height
      var height = elem[0].clientHeight;
      // element top, will be changed as scope is updated
      var top = 0;

      // updates element's original position
      scope.$watch(function(){
        elemRect = elem[0].getBoundingClientRect();
        return elemRect.top + $window.pageYOffset;
      }, function(newVal, oldVal){
        // this is the original element position, save it
        if(!elem.hasClass('fixed-bottom')){
          top = newVal;
        }
        // properly position the element even in `fixed` display
        elem.css('width', elemRect.width);
        elem.css('left', elemRect.left);
        // check position
        toggleClass();
      });

      // toggle `fixed-bottom` class based on element's position
      var toggleClass = function() {
        // the element is hidden
        if (elem[0].getBoundingClientRect().top + height > $window.innerHeight) {
          elem.addClass('fixed-bottom');
        }
        // the element is visible
        else {
          // the element is visible in its original position
          if (top - $window.pageYOffset + height < $window.innerHeight && elem.hasClass('fixed-bottom')) {
            elem.removeClass('fixed-bottom');
          }
        }        
      }

      // bind to `onscroll` event
      $window.onscroll = function() {
        toggleClass();        
      };

    }
  };
})
;

对不起，当页脚不可见时，按钮应该一直贴在底部。
.fixed-bottom {
  position: fixed;
  top: auto;
  bottom: 0;
}