javascript - CSS固定位置改变滚动高度

Question

我试图让一堆导航在您向下滚动页面时相互堆叠，直到填满整个页面。出于某种原因，在第三个导航(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>

Answer 1

当您为元素分配固定位置时，它就会从页面流中移除。从而减少页面的长度和 $(window).scrolltop 值。这是您的代码卡住的地方，无法运行更高的 $(window).scrolltop 值。