Question

我在站点中使用了一个导航栏的词缀组件，并希望在较小的屏幕上禁用它。我正在使用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();
    }

}

Answer 1

您可以像在Bootstrap页面上那样使用CSS，就像使用CSS一样。如果屏幕低于特定尺寸，请使用@media queries检测屏幕尺寸，并且不要将位置设置为fixed。例如：

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

如果屏幕宽度超过768px，此规则将起作用。

您也可以这样做，反之亦然，如果屏幕小于特定大小，请将元素的位置明确设置为static：

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

Answer 2

如果我错了，请纠正我，但尝试将if(z <= 767) {设置为if(z <= 1) {，这样就不会重新调整大小？除非我错过了你的问题。

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

2 个答案: