我想使导航栏导航下面的标题出现在屏幕顶部时向下滚动！向下滚动时菜单不会立即出现。再往下滚动就出现了！
也有人能解释一下吗？$（window）.height（）- 70;我不知道它会返回什么。
jquery代码：

$(document).ready(function(){
    $(".nav").slideDown(800);

    $(window).on('scroll',function(){
        var navHeight = $(window).height() - 70;
        if ( $(window).scrollTop()> navHeight){
            $('.nav').addClass('fixed');
            $('.nav').css("display","none");
            $('.nav').fadeIn("fast");
        }
        else{
            $('.nav').removeClass('fixed');
            $('.nav').css("display","block");
        }
    });

});

字符串
我的html代码：

<div id="header">
    <div id="header-container">
        Logo goes here!!
    </div>
</div>

<div class="nav">
    <div class="nav-container">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Browse</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
</div>

<div class="main-body">
    <div class="article-area">
        <div class="article">
            <h3>This is the title</h3>
            <hr>
            <img src="imgtest.jpg"></img>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            <div class="clear"></div>
        </div>

        <div class="article">
            <h3>This is the title</h3>
            <hr>
            <img src="imgtest.jpg"></img>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            <div class="clear"></div>
        </div>          
    </div>

    <div class="sidebar-area">
        ertertre
    </div>
    <div class="clear"></div>
</div>

型
我的css代码：

body{
    margin: 0;
    padding: 0;
    background: #cccccc;
}

.clear {
    clear: both;
}

#header{
    background: #FF9900;
    height: 160px;
    width: 100%;
}

#header-container{
    width: 960px;
    height: 160px;
    margin: 0px auto 0px auto;
}

.nav{
    width: 100%;
    height: 70px;
    background: rgba(0,0,0,0.5);
    display:none; /*hiding it for cool jquery slide down effect*/
}

.fixed {
    position: fixed; 
    top: 0; 
    height: 70px; 
    z-index: 1;
}

.nav .nav-container{
    width: 960px;
    height: 62px;
    margin: 0 auto;
}

.nav .nav-container ul{
    padding-top: 6px;
    margin: 0 auto;
}

.nav .nav-container ul li{
    display: inline;
    padding: 0px;
    border-radius: 10px;
    margin-right: 20px;
    margin-left: 7px;
    background: #000000;
}

.nav .nav-container ul li a{
    color: #FF9900;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    display: inline-block;
    width:150px;
    text-align: center;
    height: 58px;
    line-height: 250%;
    background: black;
    border-radius: 10px;

}

.nav .nav-container ul li a:hover{
    background:#FF9900;
    color: white;
    border-radius: 10px; 
}

.main-body{
    width: 960px;
    background: white;
    margin:0 auto;
    min-height: 700px;
}

.article-area{
    width: 600px;
    min-height: 700px;
    float: left;
    margin: 20px;
    margin-bottom: 0px;
}

.sidebar-area{
    width: 280px;
    min-height: 400px;
    background: green;
    float: right;
    margin: 20px;
}

.article{
    padding: 10px;
    border: 1px solid white;
    background: #FAFAF8;
    box-shadow: 0.5px 0.5px 4px black;
    margin-bottom: 20px;
    border-radius: 5px;
}

.article p{
    width: 550px;
}

.article img{
    float: right;
    overflow: auto;
    margin-left: 10px;
}

.article h3{
    padding: 10px;
    font-size: 26px;
    padding: 3px;
    margin:0px;
}

.upper-footer{
    width: 100%;
    height: 250px;
    background: black;
}

型