Affix Issue - Bootstrap 3.2.0

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header"> <a class="navbar-brand" href="#">Project name</a>

        </div>
    </div>
</nav>
<div id="content">
    <nav class="subnav">
        <div class="container-fluid">subnav bar</div>
    </nav>
    <div class="container-fluid">
        <div id="page-content-wrapper">
            <div id="page-content">
                <div style="height: 1000px;">Lots of content</div>
            </div>
        </div>
        <div id="page-nav-wrapper">
            <div id="page-nav">side nav</div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<div class="footer">
    <div class="container-fluid">
        <p>Sticky footer content.</p>
    </div>
</div>

CSS

</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/* Sticky footer styles
-------------------------------------------------- */
 html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 1000px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 1000px;
    background-color: red;
}
/* Custom page CSS
-------------------------------------------------- */
 #content {
    margin-top: 50px;
    background-color: orange;
}
.subnav {
    background-color: red;
    min-height: 50px;
}
#page-content-wrapper {
    float: left;
    margin-right: -280px;
    width: 100%;
}
#page-content-wrapper #page-content {
    margin-right: 280px;
    background-color: teal;
}
#page-nav-wrapper {
    float: left;
    margin-top: 0;
    padding-left: 30px;
    width: 280px;
}
#page-nav-wrapper #page-nav {
    width: 250px;
    background: green;
    height: 300px;
}
#page-nav-wrapper #page-nav.affix {
    margin-top: -50px;
}

JavaScript

$("#page-nav").affix({
    offset: {
        top: function () {
            return (this.top = $(".subnav").outerHeight(true))
        },
        bottom: function () {
            return (this.bottom = $(".footer").outerHeight(true))
        }
    }
});

console.log($(".subnav").outerHeight(true))
console.log($(".footer").outerHeight(true))