Как отключить «аффикс» Bootstrap на меньших экранах?

Question

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

} 

Answer 1

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

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

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

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

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

Answer 2

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