CSS固定位置更改滚动高度

当你向下滚动页面时，我试图让一堆导航叠加在一起，直到整个页面都被填满。出于某种原因，在第三个导航（nav-mid-2）上，当我尝试设置要修复的位置时，它会向上滚动。困惑，可能只需要另一双眼睛来检查我的逻辑。如果有更好的方法，请告诉我。

$(document).ready(function(){
        $(window).scroll(function(){
            fadeHead();
            addNav();
        });
    });
    function addNav() {
        var scrollVal = $(window).scrollTop();
        console.log(scrollVal)
        if(scrollVal < 756) {
        $('.nav-mid-1').css({'position': 'relative', 'margin-top': '500px'});
      } else if(scrollVal < 1696) {  
            $('.nav-mid-2').css({'position': 'relative','margin-top': '1500px'});
            $('.nav-mid-1').css({'position': 'fixed', 'margin-top': '-256px'});
      } else if (scrollVal < 2000){
            $('.nav-mid-3').css({'position': 'relative','margin-top': '1500px'})
            $('.nav-mid-2').css({'position': 'fixed', 'margin-top': '1478px'});
            console.log('here')
        }
    }
    function fadeHead() {
        window_scroll = $(this).scrollTop();
        $('.head-fade').css({
            'opacity' : 1 - (window_scroll/300 )
        })}

.main-background {
        background-color: #bdc3c7;
        width: 100%;
        height: 100%;
        position: fixed;
    }
    .h100 {
        font-size: 3px;
    }
    .nav-mid-1 {
        margin-top: 500px;
        width: 100%;
        height: 60px;
        background-color: #3498db;
        border: 1px solid #3498db;
    }
    .nav-mid-2 {
        width: 100%;
        height: 60px;
        background-color: #f1c40f;
        border: 1px solid #f1c40f;
    }
    .nav-mid-3 {
        margin-top: 600px;
        width: 100%;
        height: 60px;
        background-color: #ecf0f1;
        border: 1px solid #ecf0f1; 
    }
    .transition {
          -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-background"></div>
    <div class="top-nav">
        <nav class="navbar navbar-inverse navbar-fixed-top"></nav>
    </div>
    <br>
    <br>
    <br>
    <br>    
    <div class="container">
        <div class="col-md-6">
            <div class="head-fade">
                <h1>Alo</h1>
                <h2>How's it goin</h2>
                <h3>Science.</h3>
                <h4>Nature Man.</h4>
                <h5>Linguist.</h5>
                <div class='h100'>Too Small.</div>
            </div>
        </div>
    </div>
    <div class="nav-mid-1">
        <h1>Welcome</h1>
    </div>
    <div class="nav-mid-2">
        <h1>To</h1>
    </div>
    <div class='nav-mid-3'>
            <h1>My</h1>
    </div>
    <div class='nav-mid-4'>
            <h1>My</h1>
    </div>