javascript - 当用户从页面底部滚动 100px 时追加 div

Question

我正在使用 angularjs 并尝试将页脚附加到我页面的 html 元素。当用户滚动到页面底部 100 像素以内时，我希望页脚消失，​​当用户从底部向上滚动超过 100 像素时，我希望页脚出现。我的 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 的开关在函数内部...