在调整浏览器大小时禁用滚动事件

Question

所以我有一个基本的脚本，当用户滚动到页面的某个点时，该脚本将固定的类应用于div（.filter-target）。 我想知道的是，如果用户调整浏览器的大小并且浏览器的宽度小于1100px（即minWidth变量），那么如何禁用滚动事件。

var app = {};

app.filter = (function() {
    var module = {};

    var $filter = $('.filter-target');
 // Creates a spacer, this is to push the content of the page down the same size of the floating menu
    var $filterSpacer = $('<div />', {
        "class": "filter-drop-spacer",
        "height": $filter.outerHeight()
    });

    var minWidth = Modernizr.mq('only screen and (min-width: 1100px)');
    var windowWidth = $(window).width();

    module.init = function() {

        var fixedFilter = function() {
            $filter
                .before($filterSpacer)
            .addClass("is-fixed") 
            .css('width', $('.page-content').width());
        };

        var relativeFilter = function() {
            $filter
                .removeClass("is-fixed")
                .css('width', '');

            $filterSpacer.remove(); 
        };

        var filterController = function() {
            if (minWidth == true) {
                if (!$filter.hasClass('is-fixed') && $(window).scrollTop() > $filter.offset().top) {
                    // Checks the filter doesn't have the class fix and that vertical number of pixels hidden is greater than the navigations position on the page. This will get executed the first time the page scrolls past the point. I.E When you scroll hits the menu.
                    fixedFilter();
                } else if ($filter.hasClass('is-fixed') && $(window).scrollTop() < $filterSpacer.offset().top) {
                    // If the navigation element has the fix class and that vertical number of pixels hidden is less than the top of the newly added spacer. I.E When you scroll UP past the spacer.
                    relativeFilter();
                }
            } else {
                relativeFilter();
            }
        };

        $(window).scroll(function() {
            filterController();
        });

    };

    return module;
})();

$(document).ready(function() {
    app.filter.init();
    console.log('filter');
});

Answer 1

您可以通过调整大小事件来实现

在开始时设置minWidth

var minWidth = true;

调整大小时将其设为false

$( window ).resize(function() {
    if( $(window).width() < 1100){
       minWidth = false;
    }    
});