Question

我正在使用angularjs并尝试将页脚附加到页面的html元素中。当用户滚动到页面底部100px以内时，我希望页脚消失，当用户从底部向上滚动超过100px时，我希望页脚显示。我的CSS将页脚修复到页面底部。我已经让它为标题工作了。

这是我到目前为止最接近的，但它不太正确。这应该很容易，但很明显我错过了什么，有什么想法吗？

controller: ['$scope', '$window', function($scope, $window) {
    var hasHeader=false;
    var hasFooter=false;
    var myEl = angular.element(document).find('body');
    angular.element($window).bind("scroll", function() {

     $scope.$apply(function() {
        $scope.header;
        $scope.footer;
     });

    if($scope.header == true) {
         if (this.pageYOffset >= 100 && hasHeader == false) {
              myEl.prepend('<div id="header">Header content here</div>'); 
              hasHeader=true;
         } else if(this.pageYOffset < 100 && hasHeader == true) {
              var header = angular.element('#header');
              header.remove();
              hasHeader=false;
         }
      }

      console.log('$window.screen.height: ' + $window.screen.height + ' | this.pageYOffset' + this.pageYOffset)

      if ($scope.footer == true) {
         if(this.pageYOffset >= 100 && hasFooter == false) {
               myEl.append('<div id="footer">Footer content here</div>'); 
               hasFooter=true;
         } else if((this.pageYOffset >= ($window.screen.height - 100)) && hasFooter == true) {
              var footer = angular.element('#footer');
              footer.remove();
              hasFooter=false;
         }
      }

      $scope.$apply();
    });
}],

This是我到目前为止所得到的。它应该与标题相同。

Answer 1

我认为你必须使用指令。并在页脚元素上放置ng-show，当滚动距离发生时，显示元素..

我现在尝试为你编写一个示例指令

.directive('scrollDirctv', ['$document', '$window', function($document, $window) {
    return {
        scope: {
            scroll: '=?scrollDirctv',
            method: '&scrollMethod'
        },
        link: function(scope, element, attrs) {
            var windowEl = angular.element($window);
            var offset = 0;
            var handler = function(e) {
            var docHeight = ($document.height !== undefined) ? $document.height : $document.body.offsetHeight;
            var windowHeight =  $window.innerHeight;
                offset = $window.pageYOffset - (docHeight - windowHeight);
                if(attrs.scrollMethod != undefined){
                    if(offset>100){
                        scope.method();
                    }
                }
            }
            windowEl.on('scroll', scope.$apply.bind(scope, handler));
            handler();
        }
    };
}])

并将指令放在元素上，并为其指定一个函数，

（<div scroll-dirctv scroll-method="myFunction()" >），以便您可以更改函数内ng-show使用的切换...

Answer 2

您不应该从控制器执行DOM操作。相反，您应该创建一个指令并在那里更新一些属性，以便您可以使用ng-show显示和隐藏页眉和页脚，让Angular为您执行DOM操作。

您的指令应如下所示：

app = angular.module('myApp', []);

app.directive("scroll", ["$document", function ($document) {

  function getDocHeight() {
    return Math.max(
      document.body.scrollHeight, document.documentElement.scrollHeight,
      document.body.offsetHeight, document.documentElement.offsetHeight,
      document.body.clientHeight, document.documentElement.clientHeight
    );
  }

  function scrollController($scope, $window) {
    var vm = this;

    vm.isHeaderVisible = false;
    vm.isFooterVisible = true;

    function checkScroll() {
      var scrollY = this.pageYOffset;
      var maxScroll = getDocHeight() - $window.innerHeight;

      console.log('scrollY = ' + scrollY + ', maxScroll = ' + maxScroll);

      // HEADER:

      if (vm.hasHeader) {
        if (scrollY >= 100 && vm.isHeaderVisible === false) {
          console.log("Show header");
          vm.isHeaderVisible = true;
        } else if(scrollY < 100 && vm.isHeaderVisible === true) {
          console.log("Hide header");
          vm.isHeaderVisible = false;
        }
      }

      // FOOTER:

      if (vm.hasFooter) {
        if(scrollY < (maxScroll - 100) && vm.isFooterVisible === false) {
          console.log("Show footer");
          vm.isFooterVisible = true;
        } else if(scrollY >= (maxScroll - 100) && vm.isFooterVisible === true) {
          console.log("Hide footer");
          vm.isFooterVisible = false;
        }
      }

      $scope.$apply();
    }

    angular.element($window).bind("scroll", checkScroll);
  };


  return {
    controller: ['$scope', '$window', scrollController],
    bindToController: {
      hasHeader: '@',
      hasFooter: '@'
    },
    controllerAs: 'scroll',
    scope: true
  }
}]);

#page {
    position: relative;
    height: 1000px;
}

header,
footer {
    position: fixed;
    height: 50px;
    line-height: 50px;
    left: 0;
    width: 100%;
    color: white;
    text-align: center;
}

header {
    background: red;
    top: 0;
}

footer {
    background: blue;
    bottom: 0;
}

.as-console-wrapper {
  background: #e9e9e9;
  top: 60px !important;
  bottom: 60px !important;
  max-height: none !important;
  left: 10px !important;
  right: 10px !important;
  border: none !important;
  border-radius: 2px;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, .125);
}

<div data-ng-app="myApp" id="page" data-scroll data-has-header="true" data-has-footer="true">
    <header data-ng-show="scroll.isHeaderVisible">HEADER</header>
    <footer data-ng-show="scroll.isFooterVisible">FOOTER</footer>
</div>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

注意我也改变了一些我认为不正确的逻辑。

当用户从页面底部滚动100px时附加div

2 个答案: