Jak mogę wyłączyć "przymocowanie" Bootstrapa na mniejszych ekranach?

Question

Używam składnika affix w serwisie dla paska nawigacyjnego i chcę go wyłączyć na mniejszych ekranach. Używam metody jquery w porównaniu z danymi i nie mogę wymyślić, jak ją wyłączyć, gdy moja rozdzielczość ekranu jest mniejsza niż 767px. Próbowałem przechwytywać szerokość okna podczas zmiany rozmiaru i przewijania oraz zwracania wartości false lub usuwania klas affixów, ale to naprawdę nie działa dobrze.

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

Możesz zrobić to w taki sam sposób, jak na stronie Bootstrap z samym CSS. Użyj @media queries, aby wykryć rozmiar ekranu i nie ustawiaj pozycji na fixed, jeśli ekran jest poniżej określonego rozmiaru. Na przykład:

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

Ta reguła będzie stosowana tylko wtedy, gdy szerokość ekranu będzie większa niż 768 pikseli.

Można również zrobić to na odwrót, należy ustawić pozycję elementu wyraźnie do static jeśli ekran jest mniejszy niż pewnej wielkości:

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

Answer 2

Popraw mnie jeśli się mylę, ale spróbuj ustawić if(z <= 767) { do if(z <= 1) { tamtędy nie będzie re-size? Chyba że brakuje mi punktu twojego pytania.