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

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

by bizamajig

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.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 lacinia nisi. Ut sagittis massa...

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...

JavaScript

! function ($) {
    $(function () {
        var $window = $(window)
        var $body = $(document.body)
        var $sideBar = $('.bs-sidebar')
        var navHeight = $('.navbar').outerHeight(true) + 10

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

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

        $window.on('resize', function () {
            $body.scrollspy('refresh')
            // We were resized. Check the position of the nav box
            $sideBar.affix('checkPosition')
        })

        $window.on('load', function () {
            $body.scrollspy('refresh')
            $('.bs-top').affix();
            $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()

                        // We can cache the height of the header (hence the this.top=)
                        // This function will never be called again.
                        return (this.top = offsetTop - navOuterHeight - sideBarMargin);
                    },
                    bottom: function () {
                        // We can't cache the height of the footer, since it could change
                        // when the window is resized. This function will be called every
                        // time the window is scrolled or resized
                        return $('.bs-footer').outerHeight(true)
                    }
                }
            })
            setTimeout(function () {
                // Check the position of the nav box ASAP
                $sideBar.affix('checkPosition')
            }, 10);
            setTimeout(function () {
                // Check it again after a while (required for...