未正确检测到Windows调整大小事件

Question

我有一个导航菜单，应该保持固定在页面顶部使用sticky.js插件窗口宽度等于或大于992 px。对于较小的窗口，它应该与站点的流量相匹配。现在，由于这是一个响应网站，我想实现一个动态窗口宽度检测时，窗口被调整。

下面的代码似乎没有正确检测到调整大小的事件。我必须重新加载页面以粘贴/取消正确宽度的导航条：

$(document).ready(function() {

var currentWindow = $(window);

function checkWidth() {

    var windowSize = currentWindow.width();
    if (windowSize >= 992) {

        // Sticky.js
        $('.navbar').sticky({ 
            topSpacing: 0, 
            getWidthFrom: '.upper-header',
            responsiveWidth: true
        });

    } else {
        alert('Window is smaller');
    }
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

});

会感谢你的指导。

Answer 1

当窗户缩小时，你需要解开肚脐。

$(document).ready(function() {

    var currentWindow = $(window);
    var stuck = false; // So we only call the plugin when necessary

    function checkWidth() {

        var windowSize = currentWindow.width();
        if (windowSize >= 992 && !stuck) {

            // Sticky.js
            $('.navbar').sticky({ 
                topSpacing: 0, 
                getWidthFrom: '.upper-header',
                responsiveWidth: true
            });
            stuck = true;

        } else if (windowSize < 992 && stuck) {
            alert('Window is smaller');
            $('.navbar').unstick();
            stuck = false;
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    currentWindow.resize(checkWidth);

});