anchor.diff:      }
   
       /* sidebar */
  -    #sidebar {
  +    #sidebar ul {
         padding-left: 20px;
         margin-top: 20px;
         margin-bottom: 20px;
  +    }
  +
  +    #sidebar li {
  +      list-style: none;
       }
   
       #sidebar li.nav-H2 {
  
positive.code:     var hash = this.hash;
  
      // animate
      $('html, body').animate({
        scrollTop: $(hash).offset().top - 20
      }, 300, function () {
  
        // when done, add hash to url
        // (default click behaviour)
        if (window.location)
        window.location.hash = hash;
      });
    });
    function sidebarTop() {
      var sidebarlOffset = $('#sidebar').offset().top;
      if ($('.active:last').offset()){
        var activeElementOffset =  $('.active:last').offset().top;
      }
      var difference = activeElementOffset - sidebarlOffset;
      if ( difference > (window.innerHeight/5) ) {
        var top = (difference - (window.innerHeight/5));
        $('.affix').css('top', -top);
      } else {
        $('.affix').removeAttr('style');
  
      }
    };
  
    $(window).load(function() {
      sidebarTop();
    });
    $(window).resize(function() {
      sidebarTop();
    });
    $(window).scroll(function() {
      sidebarTop();
    });
  </script>
  </body>
  </html>
  
negative.code: 
      <!--Side Bar -->
      <nav class="col-md-3 bs-docs-sidebar hidden-sm hidden-xs scrollspy">
        <div id="sidebar">
        <div id="back-top" style="display: block;">
          <a href="#">
            <span class="fa-stack fa-sm">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-arrow-up fa-stack-1x fa-inverse"></i>
            </span>
          </a>
        </div>
        <ul class="nav" data-spy="affix"></ul>
        </div>
      </nav>
  
    </div>
  