0

これまで何かを「バインド」または「バインド解除」する必要がなかったので、やりたいことに直接関連する例が見つからないため、混乱しています。

ここのページの特定のポイントに到達すると div をスクロールするプラグインがあります。

しかし、ウィンドウが特定の幅の場合にのみプラグインを起動し、ウィンドウが再びその幅を下回っている場合は「起動」/バインド解除します...

(ちなみに #contact-form は、私がスクロールしているコンテナで、ご想像のとおり、連絡先フォームが含まれています)

function contactForm() {
    windowWidth = $(window).width();
    if (windowWidth >= 1024) {
        jQuery('#contact-form').containedStickyScroll();
    } else {
        jQuery('#contact-form').unbind(); // I don't want the plugin to fire
    }
};    


// Standard stuff...

$(document).ready(function() {
    contactForm();
});

$(window).resize(function() {   
    contactForm();
});

この含まれるスティッキー スクロール機能は次のようになります。

  $.fn.containedStickyScroll = function( options ) {

    var defaults = {  
        oSelector : this.selector,
        unstick : true,
        easing: 'linear',
        duration: 500,
        queue: false,
        closeChar: '^',
        closeTop: 0,
        closeRight: 0  
    }  

    var options =  $.extend(defaults, options);

    if(options.unstick == true){  
        this.css('position','relative');
        this.append('<a class="scrollFixIt">' + options.closeChar + '</a>');
        jQuery(options.oSelector + ' .scrollFixIt').css('position','absolute');
        jQuery(options.oSelector + ' .scrollFixIt').css('top',options.closeTop + 'px');
        jQuery(options.oSelector + ' .scrollFixIt').css('right',options.closeTop + 'px');
        jQuery(options.oSelector + ' .scrollFixIt').css('cursor','pointer');
        jQuery(options.oSelector + ' .scrollFixIt').click(function() {
            getObject = options.oSelector;
            jQuery(getObject).animate({ top: "0px" },
                { queue: options.queue, easing: options.easing, duration: options.duration });
            jQuery(window).unbind();
            jQuery('.scrollFixIt').remove();
        });
    } 
    jQuery(window).scroll(function() {
        getObject = options.oSelector;
        if(jQuery(window).scrollTop() > (jQuery(getObject).parent().offset().top) &&
           (jQuery(getObject).parent().height() + jQuery(getObject).parent().position().top - 30) > (jQuery(window).scrollTop() + jQuery(getObject).height())){
            jQuery(getObject).animate({ top: (jQuery(window).scrollTop() - jQuery(getObject).parent().offset().top) + "px" }, 
            { queue: options.queue, easing: options.easing, duration: options.duration });
        }
        else if(jQuery(window).scrollTop() < (jQuery(getObject).parent().offset().top)){
            jQuery(getObject).animate({ top: "0px" },
            { queue: options.queue, easing: options.easing, duration: options.duration });
        }
    });

};

4

1 に答える 1

1

このプラグインcontainedStickyScrollには remove ハンドラがないため、あまりうまく書かれていません。

これにより、次の 3 つのオプションが残ります。

  1. プラグインをフォークします。

    $.fn.containedStickyScroll = function( options ) {

   return this.each(function() {

   var self = this;

   function remove() {
        getObject = options.oSelector;
        jQuery(getObject).animate({ top: "0px" }, { queue: options.queue, easing: options.easing, duration: options.duration });
        jQuery(window).unbind("scroll", $self.data("containedStickyScroll").scrollHandler);
        jQuery('.scrollFixIt').remove();

        $(self).data("containedStickyScroll", false);
   }

    if (options == "remove") {
        remove();
        return;
    }

    // Make sure that this is only done once.
    if (this.data("containedStickyScroll"))
        return;

    var defaults = {  
        oSelector : this.selector,
        unstick : true,
        easing: 'linear',
        duration: 500,
        queue: false,
        closeChar: '^',
        closeTop: 0,
        closeRight: 0  
    }  

    var options =  $.extend(defaults, options);

    if(options.unstick == true){  
        $(this).css('position','relative');
        $(this).append('<a class="scrollFixIt">' + options.closeChar + '</a>');
        jQuery(options.oSelector + ' .scrollFixIt').css('position','absolute');
        jQuery(options.oSelector + ' .scrollFixIt').css('top',options.closeTop + 'px');
        jQuery(options.oSelector + ' .scrollFixIt').css('right',options.closeTop + 'px');
        jQuery(options.oSelector + ' .scrollFixIt').css('cursor','pointer');
        jQuery(options.oSelector + ' .scrollFixIt').click(remove);
    } 

    options.scrollHandler = function () {
        getObject = options.oSelector;
        if(jQuery(window).scrollTop() > (jQuery(getObject).parent().offset().top) &&
           (jQuery(getObject).parent().height() + jQuery(getObject).parent().position().top - 30) > (jQuery(window).scrollTop() + jQuery(getObject).height())){
            jQuery(getObject).animate({ top: (jQuery(window).scrollTop() - jQuery(getObject).parent().offset().top) + "px" }, 
            { queue: options.queue, easing: options.easing, duration: options.duration });
        }
        else if(jQuery(window).scrollTop() < (jQuery(getObject).parent().offset().top)){
            jQuery(getObject).animate({ top: "0px" },
            { queue: options.queue, easing: options.easing, duration: options.duration });
        }
    };

    jQuery(window).scroll(options.scrollHandler);

    $(this).data("containedStickyScroll", options);
};};

    今、あなたはこれを行うことができます:

    (function($) {

    function contactForm() {
        windowWidth = $(window).width();
        if (windowWidth >= 1024)
            $('#contact-form').containedStickyScroll();
        else
            $('#contact-form').containedStickyScroll("remove");
    };    

    // Standard stuff...

    $(document).ready(contactForm);

    $(window).resize(contactForm);

})(jQuery);

    また、ウィンドウ オブジェクトからすべてのイベント ハンドラーをバインド解除するというひどい慣行も削除しました。これはオプション 2 よりもさらに悪い方法です。

  2. unbind を使用してすべてのイベント ハンドラー (そのプラグインによって作成されていないものを含む) を削除することで、問題を回避します。

    windowスクロール イベント ハンドラーはオブジェクト上にあり、他のプラグインなどが同じイベント ハンドラーを使用する可能性が非常に高いため、実際にはオプションではありません。

    $(window).unbind("scroll");

  3. DOM 上の要素全体をリセットします。

    (function() {

    var hasContactForm = false,
        $contactForm = $("#contact-form").clone();

    function contactForm() {
        windowWidth = $(window).width();
        if (!hasContactForm && windowWidth >= 1024) {
            hasContactForm = true;
            jQuery('#contact-form').containedStickyScroll();
        } else if (hasContactForm && windowWidth < 1024)
            hasContactForm = false;
            $('#contact-form').replaceWith($contactForm);
        }
    };    

    // Standard stuff...

    $(document).ready(contactForm);

    $(window).resize(contactForm);

})();

    ユーザー入力もリセットされるため、これも実行可能な解決策ではない可能性があります。ただし、追加のロジックを追加して、復元された連絡先フォームにユーザー入力を運ぶことができます。

各オプションの多くの欠点を考慮して、より良いプラグインを見つけるか、独自のプラグインを作成することを強くお勧めします. それ以外の場合は、オプション 1 がおそらく最適です (機能する場合)。

于 2012-04-29T13:57:05.673 に答える