Affix element in Bootstrap

Question

Today I learned about affix and the use of it with Bootstrap. I read all about it on the Bootstrap website and stack-overflow, and eventually checked How to use the new affix plugin in twitter's bootstrap 2.1.0? (see the jsfiddle link) as a good example.

But, I think I'm doing something fundamentally wrong. I added the right javascript to my index.php. I added the CSS to my stylesheet and just copy-pasted the nav-bar example from jsfiddle into my index.php. Nothing works.

HTML:

<div class="container">
    <div class="row">
        <!-- micro hero unit-->
        <div class="span12">
            <div class="well">
                 <h1> Some page title </h1> 
                <p>This is a website.</p>
                <p> <a class="btn btn-primary" href="#">Tell me more</a> 
                </p>
            </div>
        </div>
    </div>
</div>

JavaScript:

$(function () {
    $('#nav-wrapper').height($("#nav").height());
    $('#nav').affix({
        offset: {
            top: $('#nav').offset().top
        }
    });
});

Can someone tell me what I did wrong?