incorrect outerHeight before refresh and on resize

Question

[edited following your comments]

I'm seeking to dynamically assign a margin-top to a div (.main) which is below a fixed div (header) which dimensions varies depending on scroll positioning. This margin-top should be equal to the heigth of (header) when in its upper position (.smart).

The following code is working almost without a hitch:

   //first function to check the width of the page and assign a margin-top equal to           
   //header.outerHeight in its default position

    function checkWidth(){
    var winInnW = window.innerWidth;
    var $headerHeight;

if(winInnW<=640){
       $('header').addClass('smart');
       var $headerHeight = $('header.smart').outerHeight(true);
        $('.main').css({'marginTop': $headerHeight});
    }
    else
    {
        $('header').removeClass('smart');

    }

if((winInnW>640) && (winInnW<1280)){
       $('header').addClass('medium');
       var $headerHeight = $('header.medium').outerHeight(true);
        $('.main').css({'marginTop': $headerHeight});
    }
    else
    {
        $('header').removeClass('medium');

    }

if(winInnW>=1280){
       $('header').addClass('large');
       var $headerHeight = $('header.large').outerHeight(true);
        $('.main').css({'marginTop': $headerHeight});
    }
    else
    {
        $('header').removeClass('large');
    }}

checkWidth();
$(window).on('resize load', checkWidth);


// second function that checks the scroll hiatus and applies styles accordingly called 
//on scroll movement only
function checkScroll(){
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 10;
    if(y_scroll_pos > scroll_pos_test){
        $('header').addClass('lower');
    }

    else{
        $('header').removeClass('lower')
    }}

$(window).on('scroll', checkScroll);

Problems here:

• on first opening the page on certain small windows it still takes a refresh for the margin to adjust (closing and subsequent reopenings of the page in the same resolution seems to works fine though)
• resizing to smaller window sizes on the fly, the margin fails to adjust and takes a refresh

Any pointers as to what i'm doing wrong?

Appreciated!