CSS转换插件粘角成指令 [英] Converting CSS Sticky Plugin Into Angular Directive
本文介绍了CSS转换插件粘角成指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图用这个粘CSS插件与角度指令。我试过这个包裹code到一个指令，但没有运气还没有得到它的工作。
下面是$ C，而不角的插件$ CPEN - 的http：// codepen.io / chrissp26 /笔/ gBrdo
这是我迄今。
任何帮助或指导将大大AP preciated。
app.directive（'粘'，函数（）{返回功能stickyTitles（胶粘）{this.load =功能（）{ stickies.each（函数（）{ VAR thisSticky = jQuery的（本）.wrap（'＆LT; DIV CLASS =followWrap/＆GT;'）;
。thisSticky.parent（）高度（thisSticky.outerHeight（））; jQuery.data（thisSticky [0]，POS，thisSticky.offset（）上面。）; }）;
} this.scroll =功能（）{ stickies.each（功能（我）{ VAR thisSticky = jQuery的（本），
nextSticky = stickies.eq第（i + 1），
prevSticky = stickies.eq（I-1），
POS = jQuery.data（thisSticky [0]，'POS'）; 如果（POS＆下; = jQuery的（窗口）.scrollTop（））{ thisSticky.addClass（固定）; 如果（nextSticky.length大于0和放大器;＆安培; thisSticky.offset（）顶部方式＆gt; = jQuery.data（nextSticky [0]，POS） - thisSticky.outerHeight（））{ 。thisSticky.addClass（绝对）的CSS（顶部，jQuery.data（nextSticky [0]，'POS'） - thisSticky.outerHeight（））; } }其他{ thisSticky.removeClass（固定）; 如果（prevSticky.length大于0＆放大器;＆放大器; jQuery的（窗口）.scrollTop（）＆下; = jQuery.data（thisSticky [0]，'POS'） - prevSticky.outerHeight（））{ prevSticky.removeClass（绝对）removeAttr（风格）。 } }
}）;
}
}返回功能（）{ VAR newStickies =新stickyTitles（jQuery的（followMeBar。））; newStickies.load（）; jQuery的（窗口）。在（滚动功能（）{ newStickies.scroll（）; }）;
};}）;
解决方案
试试这个：
＆LT;粘性的GT;
＆LT; DIV CLASS =followMeBar＆gt;将＆LT; / DIV＆GT;
＆LT; BR＆GT;
＆LT; BR＆GT;
＆LT; BR＆GT;
＆LT; BR＆GT;
＆LT; BR＆GT;
＆LT; BR＆GT;
＆LT; BR＆GT;
＆LT; BR＆GT;
＆LT; BR＆GT;
＆LT; BR＆GT;
＆LT; DIV CLASS =followMeBar＆GT; B＆LT; / DIV＆GT;
＆LT; /粘＆GT;
指令：
app.directive（'粘'，函数（）{ VAR stickyTitles =功能（胶粘）{ this.load =功能（）{ stickies.each（函数（）{ VAR thisSticky = jQuery的（本）.wrap（'＆LT; DIV CLASS =followWrap/＆GT;'）;
。thisSticky.parent（）高度（thisSticky.outerHeight（））; jQuery.data（thisSticky [0]，POS，thisSticky.offset（）上面。）; }）;
} this.scroll =功能（）{ stickies.each（功能（我）{ VAR thisSticky = jQuery的（本），
nextSticky = stickies.eq第（i + 1），
prevSticky = stickies.eq（I - 1）
POS = jQuery.data（thisSticky [0]，'POS'）; 如果（POS＆下; = jQuery的（窗口）.scrollTop（））{ thisSticky.addClass（固定）; 如果（nextSticky.length大于0和放大器;＆安培; thisSticky.offset（）顶部方式＆gt; = jQuery.data（nextSticky [0]，POS） - thisSticky.outerHeight（））{ 。thisSticky.addClass（绝对）的CSS（顶部，jQuery.data（nextSticky [0]，'POS'） - thisSticky.outerHeight（））; } }其他{ thisSticky.removeClass（固定）; 如果（prevSticky.length大于0＆放大器;＆放大器; jQuery的（窗口）.scrollTop（）＆下; = jQuery.data（thisSticky [0]，'POS'） - prevSticky.outerHeight（））{ prevSticky.removeClass（绝对）removeAttr（风格）。 } }
}）;
}
} 返回{
限制：'E'，
链接：功能（范围，元素，ATTRS）{
VAR newStickies =新stickyTitles（$（元素）.find（followMeBar。））; newStickies.load（）; jQuery的（窗口）。在（滚动功能（）{ newStickies.scroll（）; }）;
}
};
http://plnkr.co/edit/13w5e7n0ReWoaO8513K5?p=$p$ PVIEW
I am trying to use this Sticky CSS plugin with an Angular Directive. I tried wrapping this code into a Directive but no luck yet getting it to work.
Here is the CodePen of the plugin without Angular - http://codepen.io/chrissp26/pen/gBrdo
and this is what I have so far.
Any help or guidance would be greatly appreciated.
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();
});
};
});
解决方案
try this:
<sticky>
<div class="followMeBar">a</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">b</div>
</sticky>
directive:
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
这篇关于CSS转换插件粘角成指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
