jquery - 更新前とサイズ変更時のouterHeightが正しくありません

Question

[あなたのコメントに従って編集]

スクロールの位置によって寸法が変化する固定 div (ヘッダー) の下にある div (.main) に margin-top を動的に割り当てようとしています。この margin-top は、上部の位置 (.smart) にあるときの (header) の高さに等しくなければなりません。

次のコードは、ほとんど問題なく動作しています。

   //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);

ここでの問題:

• 特定の小さなウィンドウで最初にページを開くと、マージンを調整するためにまだ更新が必要です（同じ解像度でページを閉じてから再度開くと、正常に動作するようです）
• その場で小さなウィンドウサイズにサイズ変更すると、マージンの調整に失敗し、更新が必要になります

私が間違っていることについての指針はありますか？

感謝！