如何在较小的屏幕上禁用 Bootstrap 的“affix”？

我在网站中使用 Affix 组件作为导航栏，并希望在较小的屏幕上禁用它。我正在使用 jquery 方法与数据，并且不知道当我的屏幕分辨率小于 767px 时如何关闭它。我尝试过在调整大小和滚动时捕获窗口宽度，然后返回 false 或删除附加类，但效果不佳。

if($('#subnav').length){

    $(window).resize(function() {
        var wWidth = $(window).width();
        getSize(wWidth);
    });

    $(window).scroll(function () {
        var wWidth = $(window).width();
        getSize(wWidth);
    });

    function getSize(z){
        if(z <= 767) {
                    // I tried doing return false here, no good.
            $('#subnav').removeClass('affix').removeClass('affix-top');
            $('.nav > li').removeClass('active');
        } else {
            setNav();
        }
    }

    var wWidth = $(window).width();
    getSize(wWidth);

    function setNav (){
        $('#subnav').affix({
            offset: {
            top: 420,
            bottom: 270
            }
        });
        $('#subnav').scrollspy();
    }

}

您可以像在 Bootstrap 页面上一样，仅使用 CSS 来完成此操作。使用@媒体查询 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries检测屏幕尺寸并且不设置位置fixed如果屏幕低于一定尺寸。例如：

@media (min-width: 768px) {
    .affix {
        position: fixed;
    }
}

此规则仅在屏幕宽度大于 768px 时才有效。

您也可以反之亦然，将元素的位置显式设置为static如果屏幕小于一定尺寸：

@media (max-width: 767px) {
    .affix {
        position: static;
    }
}