如何禁用Bootstrap的“缀"功能在较小的屏幕上? [英] How can I disable Bootstrap's "affix" on smaller screens?

问题描述

我在网站上使用导航栏的词缀组件，并希望在较小的屏幕上禁用它.我正在使用jquery方法和数据，无法弄清楚当屏幕分辨率小于767px时如何将其关闭.我试过在调整大小和滚动时捕获窗口宽度，然后返回false或删除词缀类，但实际上并不能很好地工作.

I'm using the affix component in a site for a navbar and would like to disable it on smaller screens. I'm using the jquery method vs. the data and can't figure out how to turn it off when my screen resolution is smaller than 767px. I've tried capturing the window width on resize and scroll and either returning false or removing the affix classes but it doesn't really work well.

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查询 来检测屏幕尺寸如果屏幕小于特定尺寸，则不要将位置设置为fixed.例如:

You can do it the same way like they do on the Bootstrap page, with CSS alone. Use @media queries to detect the screen size and don't set the position to fixed if the screen is below a certain size. For example:

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

仅当屏幕宽度大于768px时，此规则才会生效.

This rule will only have an effect if the screen width is more than 768px.

反之亦然，如果屏幕尺寸小于特定大小，则将元素的位置显式设置为static:

You can also do it vice versa, set the element's position explicitly to static if the screen has smaller than a certain size:

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

这篇关于如何禁用Bootstrap的“缀"功能在较小的屏幕上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！