Javascript 检查窗口高度是否大于AngularJS中的div#内容高度

只有当window.height大于包含主内容的div的高度时，我才想将css样式（位置：fixed）添加到页脚

在我的解决方案（如下）中，条件总是正确的，因此它不能像我预期的那样工作。此外，我不确定我是否使用了$scope.$watch来控制窗口高度——我不想每次更改页面（例如从主页更改为联系人页面）时都按f5来刷新范围并应用其他样式

我发现了类似的话题（例如），但对AngularJS来说没有

我使用的是AngularJS1.6。 这是我的代码：

controllersFooter.controller( 'footer' , [ '$scope' , '$window' , function( $scope , $window  ){

var $footer = angular.element(document.querySelector('#site-footer'));
$scope.windowHeight = jQuery( window ).height();

$window.onload = function() {

    $scope.$watch(function(){
        var contentHeight = document.getElementById('content-container').scrollHeight;
        return contentHeight;
    }, function(value){

        var contentHeight = value;

        if ( contentHeight < $scope.windowHeight ) {
            $footer.css(
            {
              "position":"fixed",
              "bottom":0,
              "left": 0,
              "right": 0
            }
          );
        }
    });

}; }]);

controllersFooter.controller（'footer'，['$scope'，'$window'，函数（$scope，$window）{
var$footer=angular.element（document.querySelector（“#site footer”）；
$scope.windowHeight=jQuery（window.height（）；
$window.onload=函数（）{
$scope.$watch（函数（）{
var contentHeight=document.getElementById（'content-container'）.scrollHeight；
返回内容高度；
}，函数（值）{
var contentHeight=值；
if（contentHeight<$scope.windowHeight）{
$footer.css(
{
“位置”：“固定”，
“底部”：0，
“左”：0，
“右”：0
}
);
}
});
}; }]);

您可以在页脚中使用带有范围变量的ng类，并根据页面高度将其设置为true或false 更多关于ng类的信息

1 请确保文档正文有一个滚动条

它可以是具有

溢出：auto

的任何其他div。。。您希望它是document.body，但这并不总是正确的

2. 我建议您只需使用滚动条订阅元素上的滚动事件，如：

jQuery( elementWithScrollBar ).scroll(function() {
  $scope.fixed = calculateIfFooterIsFixed();
  $scope.$digest(); // run angular digest cycle to reflect scope changes to DOM,
                    // most likely you will need it
});

---

windows resize上的事件在angularjs中本机可用

angular.element($window).on('resize', this.onResize);

在你的情况下，比如说这样的事情：

var footerHeight = document.getElementById('side-footer').scrollHeight;
this.onResize = function() {
    var contentHeight = document.getElementById('content-container').scrollHeight;
    $scope.$apply(function() {
        $scope.isFixed = contentHeight > $window.innerHeight - footerHeight
    });
}

并使用ng类：

  <div id="side-footer" ng-class="{'fixed': isFixed}">

当主要内容小于可见窗口时，位置“固定”：

---

（由于某些原因，需要运行两次以正确设置小提琴的页脚大小）

您好，谢谢您的工作，但我没有什么疑问。首先，您在css中定义了#内容容器高度（在您的eg中为240px）。但内容容器的高度应该取决于内容，每个页面的高度都会有所不同。这就是为什么我不能将css的属性高度和静态值添加到内容容器中。其次，若你们要从A页到B页检查内容高度，你们需要用F5刷新页面。嗨，高度是动态设置的，这不是一个问题。css只是“属性”。唯一的问题是，您需要在页面更改、容器更改或任何您需要的更改时调用控制器方法。如果这些容器有自己的控制器，它们可以使用$scope.$broadcast或共享服务进行通信。如果你编辑你原来的帖子并粘贴一些你拥有的html模式&写下你代码的结构（相关的控制器、服务），准确地说，我将在下周尝试解决这个问题。