将CSS粘性插件转换为角度指令

Question

我正在尝试将这个粘性CSS插件与Angular指令一起使用。我试图将这些代码包装到一个指令中，但没有运气让它起作用。

这里是插件没有角的CodePen - http://codepen.io/chrissp26/pen/gBrdo

，这是我到目前为止所。

任何帮助或指导将不胜感激。

app.directive('sticky', function() { 

return function stickyTitles(stickies) { 

this.load = function() { 

      stickies.each(function(){ 

       var thisSticky = jQuery(this).wrap('<div class="followWrap" />'); 
        thisSticky.parent().height(thisSticky.outerHeight()); 

       jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top); 

      }); 
    } 

    this.scroll = function() { 

      stickies.each(function(i){     

       var thisSticky = jQuery(this), 
         nextSticky = stickies.eq(i+1), 
         prevSticky = stickies.eq(i-1), 
         pos = jQuery.data(thisSticky[0], 'pos'); 

       if (pos <= jQuery(window).scrollTop()) { 

         thisSticky.addClass("fixed"); 

         if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) { 

          thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()); 

         } 

       } else { 

         thisSticky.removeClass("fixed"); 

         if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) { 

          prevSticky.removeClass("absolute").removeAttr("style"); 

         } 

       } 
      });   
    } 
} 

return function(){ 

    var newStickies = new stickyTitles(jQuery(".followMeBar")); 

    newStickies.load(); 

    jQuery(window).on("scroll", function() { 

      newStickies.scroll(); 

    }); 
}; 

}); 

Answer 1

试试这个：

<sticky> 
    <div class="followMeBar">a</div> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <div class="followMeBar">b</div> 
</sticky> 

指令：

app.directive('sticky', function() { 

    var stickyTitles = function (stickies) { 

    this.load = function() { 

     stickies.each(function() { 

     var thisSticky = jQuery(this).wrap('<div class="followWrap" />'); 
     thisSticky.parent().height(thisSticky.outerHeight()); 

     jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top); 

     }); 
    } 

    this.scroll = function() { 

     stickies.each(function(i) { 

     var thisSticky = jQuery(this), 
      nextSticky = stickies.eq(i + 1), 
      prevSticky = stickies.eq(i - 1), 
      pos = jQuery.data(thisSticky[0], 'pos'); 

     if (pos <= jQuery(window).scrollTop()) { 

      thisSticky.addClass("fixed"); 

      if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) { 

      thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()); 

      } 

     } else { 

      thisSticky.removeClass("fixed"); 

      if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) { 

      prevSticky.removeClass("absolute").removeAttr("style"); 

      } 

     } 
     }); 
    } 
    } 

    return { 
    restrict: 'E', 
    link: function(scope, element, attrs) { 
     var newStickies = new stickyTitles($(element).find(".followMeBar")); 

     newStickies.load(); 

     jQuery(window).on("scroll", function() { 

     newStickies.scroll(); 

     }); 
    } 
    }; 

http://plnkr.co/edit/13w5e7n0ReWoaO8513K5?p=preview