How can I disable Bootstrap's "affix" on smaller screens?

Question

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();     }  } 

Answer 1

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;     } } 

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

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;     } }