Calculate Height With Jquery For Sticky Header

I want to change the first header to be 100% page height and then using the javascript use this height to have the sticky header appear after the first header. So I need to calcula

Solution 1:

I was able to adapt your code into the following: Here's a fiddle

$(function() {
    var wH = $(window).height(),
        top;
    $("#header").css("height", wH);
    $(window).scroll(function(){
        top = jQuery(window).scrollTop();
        if(top>wH) // height of float header
            $('#header_stick').addClass('stick');
        else
          $('#header_stick').removeClass('stick');
     });
});

and for shiggles, watch me play this fiddle.

$(function() {
    // cache vars
    var wH = $(window).height(),
        $stick = $("#header_stick"),
        isStick;

    // adjust 1st div height
    $("#header").css("height", wH);

    // sexier implementation with toggle
    $(window).scroll(function(){
        $stick.toggleClass('stick', jQuery(window).scrollTop() > wH);
     });
});