Как отключить Bootstrap "affix" на меньших экранах?

Я использую компонент аффикса на сайте для навигационной панели и хотел бы отключить его на меньших экранах. Я использую метод jquery по сравнению с данными и не могу понять, как отключить его, когда разрешение экрана меньше 767 пикселей. Я попытался захватить ширину окна при изменении размера и прокрутке и либо возвратить 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();
    }

}

Ответы

Ответ 1

Вы можете сделать это так же, как на странице Bootstrap, только с помощью CSS. Используйте @media queries для определения размера экрана и не устанавливайте положение fixed, если экран находится ниже определенного размера. Например:

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

Это правило будет иметь эффект только в том случае, если ширина экрана больше 768 пикселей.

Вы также можете сделать это наоборот, установите позицию элемента явно на static, если размер экрана меньше определенного размера:

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

Ответ 2

Исправьте меня, если я ошибаюсь, но попробуйте установить if(z <= 767) { на if(z <= 1) { таким образом, чтобы он не изменился? Если я не упущу точку вашего вопроса.