scrollspy issue

by eric1086

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body data-spy="scroll" data-target=".main-nav">
    <nav class="main-nav">
      <ul class="nav">
        <li><a href="#first">First</a></li>
        <li><a href="#second">Second</a></li>
        <li><a href="#third">Third</a></li>
        <li><a href="#fourth">Fourth</a></li>
        <li><a href="#fifth">Fifth</a></li>
      </ul>
    </nav>
    
    <section class="no-spy">
        Don't spy me!
    </section>
    
    <section class="block" id="first">
        First
    </section>
    <section class="block" id="second">
        Second
    </section>
    <section class="block" id="third">
        Third
    </section>
    <section class="block" id="fourth">
        Fourth
    </section>
        <section class="block" id="fifth">
        Fifth
    </section>
    <section class="no-spy last">
        Don't spy me!
    </section>
</body>

SCSS

body {
    padding-top:40px;
}
nav {
    position:fixed;
    top:0;
    width:100%;
    background-color:#ddd;
    margin-bottom:2em;
    height:40px;
}

.nav li {
    float:left;
    a {
        color:black;
    }
}

li.active a {
    color:red;
}

.no-spy {
    padding-top:4em;
    background-color:lightblue;
    height:400px;
}

.block {
    background-color:#eee;
    padding:5em 1em;
    margin-bottom:1em;
}

.last {
    margin-bottom:200px;
}