jQuery插件-返回此.each（）的最佳方式

当浮动元素位于页面的“收件人”位置时，我尝试为它们制作尽可能最小的jquery插件（因此，没有默认值或选项），但尽管以下内容适用于1个“粘性”元素，但我在使其适用于多个元素时遇到了问题。我意识到我需要归还这个。但是我不能找到最好的方法。当然我不想在每个循环中调整大小和滚动

代码如下：

(function ( $, undefined ) {
    $.fn.sticky = function() {
        var self = this,
            isStickyWidth = self.data('sticky'),
            isStickyActive = false,
            windowHeight,
            elOffset = self.offset().top,
            elHeight;
        $(document).on("scroll", function(){

            if(isStickyActive && windowHeight > elHeight) {
                var scrollPos = $('body').scrollTop();
                if(scrollPos > elOffset) {
                    self.css({'position':'fixed','top':'0px'});
                } else {
                    self.css({'position':'relative'});
                }
            }
        });
        $(window).on("resize", function(){
            windowHeight = $(window).height();
            elHeight = self.height();
            self.width(self.parent().width());
            if(isStickyWidth < $(window).width() ) {
                isStickyActive = true;
            } else {
                isStickyActive = false;
            }
        }).resize();
        return this; //need to return each in this example if binding to multiple DOM elements
    };
}( jQuery ));

（函数（$，未定义）{
$.fn.sticky=函数（）{
var self=这个，
isStickyWidth=self.data（'sticky'），
isStickyActive=false，
窗高，
elOffset=self.offset（）.top，
elHeight；
$（文档）.on（“滚动”，函数（）{
如果（isStickyActive&&windowHeight>elHeight）{
var scrollPos=$（'body'）.scrollTop（）；
如果（滚动位置>elOffset）{
css（{'position'：'fixed'，'top'：'0px'}）；
}否则{
css（{'position'：'relative'}）；
}
}
});
$（窗口）.on（“调整大小”，函数（）{
windowHeight=$（window.height（）；
elHeight=self.height（）；
self.width（self.parent（）.width（））；
如果（isStickyWidth<$（窗口）.width（））{
isStickyActive=true；
}否则{
isStickyActive=false；
}
}).resize（）；
返回此；//如果绑定到多个DOM元素，则需要在此示例中返回每个元素
};
}（jQuery））；

试试这个，您的代码经过修改，可以遍历每个选择器，并允许链接

(function ( $, undefined ) {
    $.fn.sticky = function() {
    return this.each(function(){        
        var self = this,
            isStickyWidth = self.data('sticky'),
            isStickyActive = false,
            windowHeight,
            elOffset = self.offset().top,
            elHeight;
        $(document).on("scroll", function(){

            if(isStickyActive && windowHeight > elHeight) {
                var scrollPos = $('body').scrollTop();
                if(scrollPos > elOffset) {
                    self.css({'position':'fixed','top':'0px'});
                } else {
                    self.css({'position':'relative'});
                }
            }
        });
        $(window).on("resize", function(){
            windowHeight = $(window).height();
            elHeight = self.height();
            self.width(self.parent().width());
            if(isStickyWidth < $(window).width() ) {
                isStickyActive = true;
            } else {
                isStickyActive = false;
            }
        }).resize();
    }):

    };

}( jQuery ));

（函数（$，未定义）{
$.fn.sticky=函数（）{
返回此.each（函数（）{
var self=这个，
isStickyWidth=self.data（'sticky'），
isStickyActive=false，
窗高，
elOffset=self.offset（）.top，
elHeight；
$（文档）.on（“滚动”，函数（）{
如果（isStickyActive&&windowHeight>elHeight）{
var scrollPos=$（'body'）.scrollTop（）；
如果（滚动位置>elOffset）{
css（{'position'：'fixed'，'top'：'0px'}）；
}否则{
css（{'position'：'relative'}）；
}
}
});
$（窗口）.on（“调整大小”，函数（）{
windowHeight=$（window.height（）；
elHeight=self.height（）；
self.width（self.parent（）.width（））；
如果（isStickyWidth<$（窗口）.width（））{
isStickyActive=true；
}否则{
isStickyActive=false；
}
}).resize（）；
}):
};
}（jQuery））；

您不需要“返回”

this.each

，因为

this.each（）==this

。但是一旦HTML中有多个粘性类，它就无法正常工作，因为每个粘性类/节点都可能在HTML中具有不同的数据粘性属性。在jQ文档中，它提到“如果您想对特定元素进行任何操作（例如获取数据属性、计算特定位置），那么您需要使用.each（）来循环元素。”当然，我没有说您不必使用

每个

。但是写

返回这个。每个
都不是必需的。您应该在滚动和调整大小处理程序中使用每个
。使用
.data（）
存储
isStickyActive
，但绑定到多个节点上滚动不是很糟糕吗？e、 g.这里是第2点