title: Prevent Bootstrap collapse navbar from closing on mobile when scrolling
body: <p>I have a vertical navbar that becomes collapsible when viewed in mobile devices. I want my users to continue to see the navbar even after they scroll, and only have it close by clicking on an item or on the nav toggle.</p>
  
  <p>I've tried the following (from a post on stack overflow :) ) : </p>
  
  <pre><code>$('.sidebar-navbar-collapse').on({
      "show.bs.collapse": function() { this.closable = false;console.log('in show nav'); },
      "click":            function() { this.closable = true; console.log('in click to  hide nav'); },
      "hide.bs.collapse": function() { return this.closable;console.log('in hide nav, closable:', this.closable);  }
  </code></pre>
  
  <p>});</p>
  
  <p>But while I see the output for the shown &amp; click, I don't see it for the hide event when it is closed by scrolling.</p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;div class="col-md-4 col-sm-4 sidebar-nav"&gt;
      &lt;div class="navbar" role="navigation"&gt;
          &lt;h1 class='hidden-xs' style="border-bottom: 1px solid #ddd;"&gt;Topics&lt;/h1&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;span class="visible-xs navbar-brand"&gt;Topics&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="navbar-collapse collapse sidebar-navbar-collapse"&gt;
            &lt;ul class="nav navbar-nav" style="list-style:none; font-size: 16pt !important; font-family: תArial, sans-serif;" lang="HE"&gt;
               &lt;li&gt;
                  &lt;a href="/faq/1" title="Privacy"&gt;Privacy&lt;/a&gt;
               &lt;/li&gt;
               &lt;li&gt;
                  &lt;a href="/faq/2" title="Report"&gt;Report&lt;/a&gt;
               &lt;/li&gt;
            &lt;/ul&gt;                 
            &lt;div class="clear"&gt;&lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a js fiddle:</p>
  
  <p><a href="https://jsfiddle.net/bv773t0a/" rel="nofollow noreferrer">https://jsfiddle.net/bv773t0a/</a></p>
  
  <p>Thank you!</p>