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

您可以使用resize事件

来实现

在开始时设置minWidth

var minWidth = true;

在调整大小时将其设为false

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

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

1 个答案: