Prevent Bootstrap collapse navbar from closing on mobile when scrolling

Question

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.

I've tried the following (from a post on stack overflow :) ) :

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

});

But while I see the output for the shown & click, I don't see it for the hide event when it is closed by scrolling.

HTML:

<div class="col-md-4 col-sm-4 sidebar-nav">
    <div class="navbar" role="navigation">
        <h1 class='hidden-xs' style="border-bottom: 1px solid #ddd;">Topics</h1>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
          </button>
          <span class="visible-xs navbar-brand">Topics</span>
      </div>
      <div class="navbar-collapse collapse sidebar-navbar-collapse">
          <ul class="nav navbar-nav" style="list-style:none; font-size: 16pt !important; font-family: תArial, sans-serif;" lang="HE">
             <li>
                <a href="/faq/1" title="Privacy">Privacy</a>
             </li>
             <li>
                <a href="/faq/2" title="Report">Report</a>
             </li>
          </ul>                 
          <div class="clear"></div>
     </div>
</div>

Here is a js fiddle:

https://jsfiddle.net/bv773t0a/

Thank you!

Answer 1

Rightly pointed out by @Karan3112

You have something conflicting with Bootstrap Javascript within your main.js . Try:

jQuery(".collapse.navbar-collapse.in").removeClass("in");