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

在我的Angular应用程序中，我希望在用户向下滚动50像素时显示DOM元素

在Angular中有什么方法可以做到这一点吗？

也可以使用javascript

window.pageYOffset

或Jquery

$(window).scrollTop()

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

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

---

（您也可以使用jquery进行此操作）。然后，通过检查您是否高于或低于50，将样式放到元素中。这是基本思想。

您可以使用一个指令将滚动偏移存储在变量中，并将其与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>

滚动显示我！

您只需使用javascript即可。