title: How can I disable Bootstrap's "affix" on smaller screens?
body: <p>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. </p>
  
  <pre><code>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 &lt;= 767) {
                      // I tried doing return false here, no good.
              $('#subnav').removeClass('affix').removeClass('affix-top');
              $('.nav &gt; li').removeClass('active');
          } else {
              setNav();
          }
      }
  
      var wWidth = $(window).width();
      getSize(wWidth);
  
      function setNav (){
          $('#subnav').affix({
              offset: {
              top: 420,
              bottom: 270
              }
          });
          $('#subnav').scrollspy();
      }
  
  }
  </code></pre>