Scroll fade Nav

Nav that fades in when you scroll past it (there are actually 2 navs, one is only visible and fixed at after you scroll past the nav) fixed to check for height of "slider"

by John Crafts

HTML

<div id="nav2">this is the hidden div</div>
<div id="slider"> test<br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id="nav3"><div>this is a test</div></div>

CSS

body {
    height: 3000px;
    top: 0;
    position: relative;
    padding: 0;
    margin: 0;
}
#nav3 {
    position: relative;
    width: 100%;
    background: #333;
    color: #fff;
    height: 100px;
    top: 0;
}
#nav2 {
    position: fixed;
    display: none;
    width: 100%;
    background: #333;
    color: #fff;
    height: 100px;
    top: 0;
}
#nav {
    position: relative;
    width: 100%;
    background: #333;
    color: #fff;
    height: 100px;
    top: 0;
}
#slider {
    padding-top: 100px;
}

#nav23 {
    display: none;
    position: absolute;
}

JavaScript

$(window).bind("scroll", function () {
    var sliderheight = $('#slider').outerHeight();
    if ($(window).scrollTop() > sliderheight) {
        $('#nav').css('position', 'fixed');
    }
    if ($(window).scrollTop() < sliderheight) {
        $('#nav').css('position', 'relative');
    }
});
    
$(window).bind("scroll", function() {
    var s1 = $('#slider').outerHeight();
    var n1 = $('#nav3').outerHeight();
    var sliderheight2 = s1 + n1 + 50;
    if ($(this).scrollTop() > sliderheight2) {
        $("#nav2").fadeIn();
     } else {
        $("#nav2").fadeOut();
    }
});