javascript - AngularJs 中重复的 StickyHeader

Question

所以我对 AngularJs 比较陌生，我正在尝试复制我在互联网上看到过的 Stick Header Jquery 插件，但由于某种原因，当我尝试在“Angular”版本中执行此操作时，它不起作用:

($window).scroll(function() {
                            var sticky = $('.sticky'),
                                scroll = ($window).scrollTop();

                            if (scroll >= 100) sticky.addClass('fixed');
                            else sticky.removeClass('fixed');

Answer 1

有很多方法可以做到这一点。这是我的做法。

HTML:

<div class="sticky">
    The directive will bind to this snippet by the class.  
</div>

Javascript:

angular.module("myApp", [])
       .directive("sticky", ["$window", function($window){
           return ({
               link: link,
               restrict: "C"
           });
           function link(scope, element, attrs){
               angular.element($window).bind("scroll", function() {
                   if($window.pageYOffset >= 100){
                      angular.element(element).addClass("fixed");
                   }else{
                      angular.element(element).removeClass("fixed");
                   }
               });
           }
       }]);