How do I use Bootstrap's Affix.js and Scrollspy within a modal?

Question

I'm currently trying to fix a nav on the left of a set of content. To give you an idea, I'm dealing with a col-md-3 and col-md-6 within a 'row' and 'container' pair of divs. Simply: there are two columns, the smallest column containing the navigation link list (a nav nav-pills nav-stacked navigation).

The problems are that Scrollspy doesn't highlight the links after clicking and scrolling to their respective sections. And, Affix doesn't keep the navbar fixed to the side of the adjacent column.

Sample Code:

index.html

    <div class="container">
        <div class="row">

            <!-- My Naviagtion -->
            <div class="col-md-3" data-spy="scroll" data-offset="0" data-target=".fun" role="complementary">
                <div class="fun">
                    <ul class="nav nav-pills" role="tablist">
                        <li><h2>Navigation</h2></li>
                        <li><a href="#sectionone">Section1</li>
                        <li><a href="#sectiontwo">Section2</li>
                    </ul>
                </div>
            </div> 


            <div class="col-md-6" role="main">
              <div id="#sectionone">...</div>
              <div id="#sectiontwo">...</div>
            </div>
       </div> <!-- end row -->
   </div> <!-- end container -->

myapp.js

$(document).ready(function() {
    $('.col-md-3').scrollspy({ target: '.fun' });
}

style.css

.col-md-3 {
    position: relative;
} /* At this point, I was trying anything. */

Possibly Helpful: The modal has tabs in in, and these sections (including the fixed nav) is supposed to reside in one tab.