当页面向下滚动 50 像素时显示 DOM 元素答案

【问题标题】：Reveal DOM element when page scrolls down 50 pixels当页面向下滚动 50 像素时显示 DOM 元素
【发布时间】：2015-05-26 12:14:21
【问题描述】：

在我的 Angular 应用程序中，我希望在用户向下滚动 50 像素时出现一个 DOM 元素。

在 Angular 中有没有办法做到这一点？

【问题讨论】：

你可以只使用javascript。

标签： css angularjs scroll angularjs-directive

【解决方案1】：

使用 javascript

window.pageYOffset

或 Jquery

$(window).scrollTop()

您可以将它们设置在滚动侦听器中，例如 -

window.addEventListener('scroll', function() {
   var x = window.pageYOffset;
   if(x >= 50){
   //apply styles
   }else{
   //remove styles
  }
 }

（你也可以使用 jquery）。然后通过检查您是否高于或低于 50 来为元素设置/取消样式。这是基本思想。

【讨论】：

【解决方案2】：

您可以使用将滚动偏移量存储在变量中的指令，并将其与 ng-show 结合使用来显示和隐藏元素：

app.directive('scrollObserver', function($window) {
  return {
    scope: {
      scroll: '=scrollObserver'
    },
    link: function(scope) {
      angular.element($window).on('scroll', function(){
          scope.scroll = angular.element($window).scrollTop();

          // event listener does not trigger angular apply cycle automatically
          scope.$apply();
      });
    }
  };
});

然后，您可以使用该指令根据当前滚动位置隐藏元素：

<span ng-show="scroll > 50" scroll-observer="scroll">Display me on scroll!</span>

【讨论】：