Question

我的导航菜单应该使用this question固定在页面顶部，窗口宽度等于或大于992像素。对于较小的窗户，它应该与网站的流量一致。现在，由于这是一个响应式网站，我想在调整窗口大小时实现动态窗口宽度检测。

以下代码似乎无法正确检测resize事件。我必须重新加载页面以正确的宽度粘贴/取消导航栏：

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

});

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

1 个答案: