Scrolling side menu in bootstrap wordpress does not scroll with page

Question

I am trying to have a sidebar menu scroll. I seem to call the javascript correctly but I cannot get it to scroll at all.

I want the menu to fix to the affixed menu and I want to have smooth scroll.

Here is my html:

<div class="container">
<div class="row">
        <div class="col-md-3 practoreint" id="leftCol">

            <ul class="nav nav-stacked" id="sidebar">
              <li><a href="#software"><b>EndoBalance Software</b></a></li>
                 <ul>
                       <li><a href="#features">Features</a></li>
                       <li><a href="#benefits">Benefits</a></li>
                       <li><a href="#costs">Costs</a></li>
                 </ul>
              <li><a href="#continuing"><b>Continuing Education</b></a></li>
                 <ul>
                      <li><a href="#webinars">Webinars</a></li>
                      <li><a href="#casereview">Case Review Sessions</a></li>
                      <li><a href="#networking">Networking Meetups</a></li>
                      <li><a href="#certification">Certification Courses</a></li>
                      <li><a href="#cecosts">Continuing Education Costs</a></li>
                 </ul>
              <li><a href="#development"><b>Practitioner Development</b></a></li>
                 <ul>
                       <li><a href="#outside">Outside Network Referral</a></li>
                       <li><a href="#networkprovider">Wellness Network Provider</a></li>
                       <li><a href="#wellnesspractitioner">Certified Wellness Practitioner</a></li>
                       <ul>
                            <li><a href="#level1">Level 1 Certification</a></li>
                            <li><a href="#level2">Level 2 Certification</a></li>
                            <li><a href="#level3">Level 3 Certification</a></li>
                            <li><a href="#level4">Level 4 Certification</a></li>
                       </ul>
                 </ul>
              <li><a href="#student"><b>Student Educational Development</b></a></li>
              <li><a href="#hippa"><b>HIPPA and Privacy</b></a></li>
            </ul>

        </div>  
        <div class="col-md-9">
            <p>This section describes the wellness software program, professional education system, practitioner corporate opportunity, student development and HIPPA privacy. We welcome <a href="/contact/">questions and feedback</a> on this content.</p>

            <hr class="col-md-12">
          <a class="anchor3" id="top" name="software"></a>
            <h2 style="font-weight:bold;">Software</h2>

Here is the css:

.affix-top,.affix {
position: static;
}

@media (min-width: 979px) {
#sidebar.affix-top {
    position: static;
    margin-top: 30px;
    width: 228px;
}

#sidebar.affix {
    position: fixed;
    top: 70px;
    width: 228px;
}
}

#sidebar li.active {
border: 0 #eee solid;
border-right-width: 4px;
}

Here is the java:

/*!
 * JS Scripts
 */
// Placeholder
$('#sidebar').affix({
  offset: {
    top: 235
  }
});

var $body   = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;

$body.scrollspy({
target: '#leftCol',
offset: navHeight
});

/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - 50
    }, 1000);
    return false;
  }
}
});

Answer 1

Here is the fixed navbar scrolling with page answer:

http://bootply.com/104641