Fixing menu on top with jquery. menu doesn't appears later when scrolled down?

Question

I want to make navigation bar nav below the header to appear on the top of screen when scrolled down! Menu doesnt immediately appears when scrolled down. It appears after further scrolling down!

Also can someone please explain me this? $(window).height() - 70; I am nit able to figure out what it will return.

jquery code:

$(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");
        }
    });

});

my html code:

<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>

My css code:

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;
}

Answer 1

A hysteris version of menu fixing:

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

// glueMenu use for hysteresis, jittery in transition.
// also, want outside callback for persistance.
var gluedMenu = false;

$(window).on('scroll',function(){

    // glue on when scroll past header container plus your fixed position in CSS
    var navHeight1 = $('.header-container').height() + 70;

    // unglue when scroll past returns back 10 pixels after fixed position
    var navHeight2 = $('.header-container').height() + 60;

    if ( $(window).scrollTop()> navHeight1 ) {
      if (gluedMenu == false) {
        gluedMenu = true;
        $('.nav').addClass('fixed');
        $('.nav').css("display","none");
        $('.nav').fadeIn("fast");
      }
    }
    else if ( $(window).scrollTop() < navHeight2 ) {
      if (gluedMenu == true) {
        gluedMenu = false;
        $('.nav').removeClass('fixed');
        $('.nav').css("display","block");
      }
    }
}); 

});