jQuery取消绑定插件事件

我以前从未需要“绑定”或“解除绑定”任何东西，所以我感到困惑，因为我找不到一个与我想做的事情直接相关的例子

有一个插件，当你到达某个页面的某个点时，它会滚动一个div，你们都见过这种情况，对吗

但是我只想在窗口宽度达到一定宽度时启动插件，然后在窗口再次低于该宽度时“取消绑定”/取消绑定，例如

（顺便说一句，contact form是我正在滚动的容器，其中包含，你猜到了，一个contact form）

包含的粘性滚动功能如下所示：

  $.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 });
        }
    });

$.fn.containedStickyScroll=函数（选项）{
变量默认值={
oSelector:this.selector，
unstick：是的，
“线性”，
持续时间：500，
队列：false，
closeChar:“^”，
闭门：0，
右：0
}  
var options=$.extend（默认值，选项）；
如果（options.unstick==true）{
css（'position'，'relative'）；
this.append（“”+options.closeChar+“”）；
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'）。单击（函数（）{
getObject=options.oSelector；
jQuery（getObject）.animate（{top:“0px”}，
{queue:options.queue，easing:options.easing，duration:options.duration}）；
jQuery（window.unbind（）；
jQuery（'.scrollFixIt'）.remove（）；
});
} 
jQuery（窗口）.滚动（函数（）{
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（））{
动画（{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}）；
}
});

---

})

插件

containedStickyScroll

写得不太好，因为它没有删除处理程序

这给您留下了3个选项：

分叉插件

$.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);
};};

我还删除了将所有事件处理程序从窗口对象解除绑定的糟糕做法，这比选项2更糟糕

通过移除所有具有unbind的事件处理程序（包括那些不是由该插件创建的事件处理程序）来解决此问题

这不是一个真正的选项，因为滚动事件处理程序位于

窗口

对象上，其他插件等很可能使用相同的事件处理程序

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

重置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);

})();

（函数（）{
var hasContactForm=false，
$contactForm=$（“#联系人表单”）.clone（）；
函数contactForm（）{
windowWidth=$（window.width（）；
如果（！hasContactForm&&windowWidth>=1024）{
hasContactForm=true；
jQuery（“#联系人表单”）.containedStickyScroll（）；
}else if（hasContactForm&&windowWidth<1024）
hasContactForm=false；
$（“#联系方式”）。替换为（$contactForm）；
}
};    
//标准的东西。。。
$（文件）.ready（联系方式）；
$（窗口）。调整大小（contactForm）；
})();

这也可能不是一个可行的解决方案，因为它还将重置任何用户输入。但是，您可以添加额外的逻辑，将用户输入传送到恢复的联系人表单中

---

考虑到每个选项的许多缺点，我强烈建议要么找一个更好的插件，要么自己编写。否则，选项1可能是最好的（如果可行的话）。

如果不了解更多关于

containedStickyScroll（）

函数的信息，就很难回答这个问题，但是你可以试一下on（）和off（），然后看看or，看看它们是如何工作的。我已经看过了，但我不知道如何将它插入到我的代码中，因为它一直在进行关于单击事件等的操作。$（#dataTable tbody tr”）。在（“单击”上，函数（事件）{alert（$（this）.text（）；}）；你能给我一个我可以尝试的例子吗？当然，类似于

$（window）.on（'resize'，contactForm）和
$（窗口）.off（'resize'，contactForm）
，将它们放在带有窗口的if/else语句中，看看是否有效？您可以创建一个JSFIDLE供我们使用吗？仅供参考，如果您有时使用
$
，那么编写
jQuery
是毫无意义的。然而，为了确保最大的兼容性，我建议将代码包装在
（函数（$）{…}）（jQuery）中并且只在该块中使用
$
。我想我会尝试写我自己的！这对于简单的东西来说太复杂了-谢谢你的建议和工作：-@SparrwHawk你确定你已经添加了重复的
hasCOntactForm
检查以确保卷轴没有注册多次吗？我想实际上，这应该很简单，因为如果你点击演示中的小“^”，这会释放它。我们不能模拟一下吗？@SparwHawk，但它所做的是选项2，我认为这是最糟糕的一个。选项1应该可以工作，你只需要确保在再次删除插件之前不要多次调用它。
$(window).unbind("scroll");

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

})();