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

我在一个网站的一个导航栏中使用affix组件，并希望在较小的屏幕上禁用它。我使用的jquery方法与数据，不能弄清楚如果我的屏幕分辨率小于767px时关闭它。我试图捕获窗口宽度调整大小和滚动，并返回false或删除affix类，但它不真的很好。

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。使用 @media queries检测屏幕大小，如果屏幕低于一定大小，不要将位置设置为固定。例如：

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

此规则只有在屏幕宽度大于768像素时才会有效。

也可以反过来，如果屏幕小于一定大小，将元素的位置显式设置为静态：

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