Jquery Affix Issue IE

by mark47

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container">

    <div class="row">
        <div class="span12" style="height: 100px; width: 100%; background-color: blue">header
        </div></div>
    
    
    <div class="navbar" id="mainNav">
        <div class="navbar-inner">
        <button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="nav-collapse collapse">
            <ul class="nav"><li ><a href="/mazzone-mark47-revised/users">My Home</a></li><li ><a href="/mazzone-mark47-revised/p3p">View My P3P</a></li><li ><a href="/mazzone-mark47-revised/p3p/factors">Important Factors</a></li><li class='active'><a href="/mazzone-mark47-revised/p3p/statistics">Statistics</a></li><li ><a href="/mazzone-mark47-revised/p3p/control">My Decision Role</a></li><li ><a href="/mazzone-mark47-revised/p3p/next_steps">Next Steps</a></li></ul>
          </div>
        </div>
      </div>
    
    <div class="row">
            
        <div class="span3">
            <div class="intervention-sidebar" data-spy="affix"  data-offset-top="165">
              <ul id="navbar" class="nav nav-list">
                <div style="margin-bottom: 16px">Click to see other topics:</div>
                <li class='current'><a href="#" id="32">Years to Live</a></li>
                <li><a href="#" id="29">Bladder Problems</a></li>
                <li><a href="#" id="30">Sexual Problems</a></li>
                <li><a href="#" id="31">Bowel Problems</a></li>
              </ul>
            </div>   
        </div>

        <div...

CSS

.intervention-sidebar {
margin: 60px 0 0;
padding: 0;
font-size: 12px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .065);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, .065);
    width: 218px;
}.intervention-sidebar.affix {
top: 20px;
margin-top: 0;
}

JavaScript

$(document).ready(function() {
    // Button update functions


    function buttonChange() {
        // Button link helpers
        var nextSection = $("#navbar li.current").next().find("a");
        var nextSectionText = $(nextSection).text();
        var nextSectionId = $(nextSection).attr("id");
        if (nextSection.length) {
            $(".next-link span").text('Next Topic: ' + nextSectionText);
            $(".next-link").attr("id", "button" + nextSectionId);
            $("#moreButtons").css('display', 'inline-block');
        } else {
            $(".next-link span").text('Next Section: My Decision Role');
            $(".next-link").attr("id", "lastLink");
            $("#moreButtons").css('display', 'none');
        }
    }
 
    function updateLinksButtons(clickId) {
        // Change current link to visited in nav
        $("#navbar li.current a i").removeClass("icon-blue").addClass("icon-gray");
        $("#navbar li.current").removeClass("current");
        $("#nextButtons").fadeOut("slow", function() {
            buttonChange();
            $(this).delay(500).fadeIn("slow");
        });
        $("#navbar li #" + clickId).parent().addClass("current");
        $("#navbar li #" + clickId).find("i").show().removeClass("icon-gray").addClass("icon-blue");
        // Update section content
        $(".current-section").removeClass("current-section").fadeOut("slow", function() {
            $("#section" + clickId).fadeIn().addClass("current-section");
        });
    }
    // Update buttons on page load
    buttonChange();
    // Clicks on left nav load next topic/update buttons
    $("#navbar li a").click(function() {
        var navClick = $(this).attr("id");
        updateLinksButtons(navClick);
        logClick();
        // Cancels default click action
        return false;
    });
    // Clicks on bottom buttons load next topic/update buttons
    $("#nextButtons a.next-link").click(function() {
        // Prevent if we're on last topic
       ...