调整大小时，滚动到标题上方的视口会在标题下拉伸

Question

我正在创建一个以底部导航开头的网页，然后滚动到顶部。问题是当导航器固定在顶部并且我垂直调整屏幕大小时，顶部div会在标题下方向下延伸。

我试图实现不同的z索引，以便它可以隐藏在索引div下，我试图添加一个删除可见性的js函数，我试过这个：

高度：计算（100％ - 65px）;

这是一个显示我的问题的小提琴： http://jsfiddle.net/Vee24/L7x4u0qc/

关于我如何解决这个问题的任何想法？`

<div id="screen"></div>
<nav>
</nav>

<div id="mainwrap">
<div id="index">
        <h2>home</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint blanditiis perspiciatis nesciunt possimus minus molestiae culpa necessitatibus atque ut eveniet id magnam delectus reprehenderit! Ad atque aperiam rerum quas vitae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit esse nihil iusto ea natus aliquam enim ducimus deleniti vitae quibusdam</p>
</div>
</div>`

body { 
width: 100%;
height: 100%;
top: 0;
background: pink;
}

#screen {   
background: #43b29d;
height: 100vh;
position:relative;
z-index:1;
}

nav {   
width: 100%; 
height: 50px; 
bottom: 0; 
padding: 0;
position: absolute; 
overflow:hidden;
background: blue;
z-index:10;
}
.fixed {
position: fixed; 
top: 0; 
height: 50px; 
z-index: 10;
}

#index { 
height: 500px; 
width: 100%; 
margin-top: 220px;
position: absolute;  
z-index: 5;
}

$(document).ready(function(){
   $(window).bind('scroll', function() {
   var navHeight = $( window ).height() - 50;
         if ($(window).scrollTop() > navHeight) {
             $('nav').addClass('fixed').css("z-index", "9999");
         }
         else {
             $('nav').removeClass('fixed');
         }
    });
 });