Bootstrap 3 vertical menu example as used in the documentation - resizing issue

Copy of issue at http://stackoverflow.com/q/19099325/1721527

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
      <a href="../" class="navbar-brand">Home</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="../menu1">Menu 1</a>
        </li>
        <li>
          <a href="../menu2">Menu 2</a>
        </li>
        <li>
          <a href="../menu3">Menu 3</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

   <div class="bs-header" id="content">
      <div class="container">
        <h1>Titleblock Header</h1>
        <p>Some interesting catchy phrase better than Lorem ipsum.</p>
      </div>
    </div>


    <div class="container bs-docs-container">
        <div class="row">
            <div class="col-md-3">
                <div class="bs-sidebar hidden-print" role="complementary">
                    <ul class="nav bs-sidenav">
                        <li><a href="#one">One</a></li>
                        <li><a href="#two">Two</a></li>
                        <li><a href="#three">Three</a></li>
                    </ul>
                </div> <!-- end bs-sidebar -->
            </div> <!-- end col-md-3 -->   
            <div class="col-md-9">
                <div>
                    <h1 id="one">ONE</h1>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt.
                    In vel lectus sit amet velit ullamcorper sollicitudin eu...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
  position: relative; /* For scrollyspy */
  padding-top: 50px; /* Account for fixed navbar */
}

/* Keep code small in tables on account of limited space */
.table code {
  font-size: 13px;
  font-weight: normal;
}

/* Outline button for use within the docs */
.btn-outline {
  color: #563d7c;
  background-color: #fff;
  border-color: #e5e5e5;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  color: #fff;
  background-color: #563d7c;
  border-color: #563d7c;
}

/* Inverted outline button (white on dark) */
.btn-outline-inverse {
  color: #fff;
  background-color: transparent;
  border-color: #cdbfe3;
}
.btn-outline-inverse:hover,
.btn-outline-inverse:focus,
.btn-outline-inverse:active {
  color: #563d7c;
  text-shadow: none;
  background-color: #fff;
  border-color: #fff;
}


.bs-docs-nav {
  text-shadow: 0 -1px 0 rgba(0,0,0,.15);
  background-color: #563d7c;
  border-color: #463265;
  box-shadow: 0 1px 0 rgba(255,255,255,.1);
}
.bs-docs-nav .navbar-collapse {
  border-color: #463265;
}
.bs-docs-nav .navbar-brand {
  color: #fff;
}
.bs-docs-nav .navbar-nav > li > a {
  color: #cdbfe3;
}
.bs-docs-nav .navbar-nav > li > a:hover {
  color: #fff;
}
.bs-docs-nav .navbar-nav > .active > a,
.bs-docs-nav .navbar-nav > .active > a:hover {
  color: #fff;
  background-color: #463265;
}
.bs-docs-nav .navbar-toggle {
  border-color: #563d7c;
}
.bs-docs-nav .navbar-toggle:hover {
  background-color: #463265;
  border-color: #463265;
}

.bs-footer {
  padding-top: 40px;
  padding-bottom: 30px;
  margin-top: 100px;
  color: #777;
  text-align: center;
  border-top: 1px solid #e5e5e5;
}
.footer-links {
  margin: 10px 0;
  padding-left: 0;
}
.footer-links li {
  display: inline;
  padding: 0 2px;
}
.footer-links li:first-child {
  padding-left: 0;
}

@media (min-width: 768px) {
  .bs-footer {
   ...

JavaScript

!function ($) {

  $(function(){

    var $window = $(window)
    var $body   = $(document.body)

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

    $body.scrollspy({
      target: '.bs-sidebar',
      offset: navHeight
    })

    $window.on('load', function () {
      $body.scrollspy('refresh')
    })

    $('.bs-docs-container [href=#]').click(function (e) {
      e.preventDefault()
    })

    // back to top
    setTimeout(function () {
      var $sideBar = $('.bs-sidebar')

      $sideBar.affix({
        offset: {
          top: function () {
            var offsetTop      = $sideBar.offset().top
            var sideBarMargin  = parseInt($sideBar.children(0).css('margin-top'), 10)
            var navOuterHeight = $('.bs-docs-nav').height()

            return (this.top = offsetTop - navOuterHeight - sideBarMargin)
          }
        , bottom: function () {
            return (this.bottom = $('.bs-footer').outerHeight(true))
          }
        }
      })
    }, 100)

    setTimeout(function () {
      $('.bs-top').affix()
    }, 100)

    // tooltip demo
    $('.tooltip-demo').tooltip({
      selector: "[data-toggle=tooltip]",
      container: "body"
    })

    $('.tooltip-test').tooltip()
    $('.popover-test').popover()

    $('.bs-docs-navbar').tooltip({
      selector: "a[data-toggle=tooltip]",
      container: ".bs-docs-navbar .nav"
    })
})

}(window.jQuery)