0

フローティング要素がページの最後にある場合 (したがって、デフォルトやオプションはありません) に可能な限り最小の jquery プラグインを作成しようとしましたが、次は 1 つの「スティッキー」要素に対しては正常に動作しますが、動作させるには問題があります。複数の要素。this.eachを返す必要があることはわかっていますが、最善の方法を見つけることはできません。確かに、各ループでサイズ変更とスクロールは必要ありませんか?

以下のコード:

(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 ));
4

1 に答える 1

0

これを試してみてください。これは、各セレクターを反復するように変更されたコードであり、チェーンを可能にします。

(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 ));
于 2013-09-09T09:39:02.457 に答える