Bootstrap affix plugin

My fix to http://stackoverflow.com/q/30585281/4402222

by Ram Tobolski

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<header class="masthead">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">
                <img src="http://lorempixel.com/489/105/">
                </a>
            </div>
            <div class="col-sm-6"></div>
        </div>
    </div>
</header>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button>
            <span style="float:right">&nbsp</span>
            <a class="navbar-brand" href="#"><img src="http://lorempixel.com/186/40/" /></a>

        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav top-nav">
                <li><a href="#">Menu 1</a>

                </li>
                <li><a href="#">Menu 2</a>

                </li>
                <li><a href="#">Menu 3</a>

                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid" style="height: 2000px;">Scroll down the page, to make the logo image show() to the left of Menu 1.
    <br />
    <br />Scroll back up the page to make the logo image hide(), but Menu entries do not return to their former positions.
    <br />
    <br />If you click on a menu entry, they then jump to their expected positon.</div>

CSS

html, body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    font: normal 14px arial, sans-serif;
    background-color: #eeeeee;
}
nav {
    margin: 0;
}
nav.affix {
    /*position: fixed;*/
    top: 0;
    width: 100%;
}
.navbar-brand {
    position: relative;
    display: none;
    padding: 5px 15px;
}
.navbar-brand > img {
    height: 40px;
}

JavaScript

$(function () {
    $('nav').affix({
        offset: {
            top: $('header').height()
        }
    });
    $('nav').on('affix.bs.affix', function () {
        $('.navbar-brand').show();
    });
    $('nav').on('affix-top.bs.affix', function () {
        $('.navbar-brand').hide();
    });
});