检查窗口高度是否大于AngularJS中的div＃content高度

Question

I'd like to add css styles (position: fixed) to footer only if window.height is greater than height of div with main content.

In my solution (below) the condition is always true, so it dosn't work as I expect. Moreover I'm not sure if I used $scope.$watch in right way to control window height - I don't want to press f5 every time when I change page (eg. form home page to contact page) to refresh scope and apply additional styles.

I've found similar topics (eg. Forcing footer to bottom of page, if document height is smaller than window height ) but nothing for AngularJS

I'm using AngularJS 1.6. This is my code:

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

}; }]);

Answer 1

您可以在页脚中将ng-class与作用域变量一起使用，并根据页面的高度将其设置为true或false。有关ng-class的更多信息https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

1

Please make sure that the document body has a scroll.

Just it can be any other div with overflow: auto ... you expect that it will be document.body, but that is not always true

2

I advice you to just subscribe to scroll event on element with scroll-bar, like:

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

Answer 3

Event on windows resize is available natively in angularjs.

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

In your case for example sth like that:

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

and use ng-class:

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

Position "fixed" when main content is smaller than visible window: https://jsfiddle.net/UncleGoogle/jpy4zse9/25/ (for some reason need to run twice to set fiddle footer size properly)