WordPress - Header Position Top, Left &Right

I'm having a little hard time to figuring out how to have multiple headers in the website that I'm creating. And the columns width for portfolio. I Want to add a option for displaying header in site. Top Right And default to be left. And be able to set the columns width in portfolio.

I would like to know how to load the top and right headers and be able to make some customization in JavaScript files too, because the SidebarWidth in jquery.blog.js is 220.

<?php
    if of_get_option ('header_position','top') :
        get_header( 'top' );
    elseif of_get_option ('header_position','right')  :
        get_header( 'right' );
    else :
        get_header();
    endif;
    ?>

Now I need themme to understand that user choose the header top and I want the header to be on top or on right side if the right side option is chosen.

<?php
    wp_register_script('your-script', $script-url, $dependencies, false, false);
    $pass_to_js = array();               
    if of_get_option ('header_position','top') :
        $pass_to_js['sidebarWidth'] = /* a number */;
        get_header( 'top' );            
    elseif of_get_option ('header_position','right')  :
        $pass_to_js['sidebarWidth'] = 220;
        get_header( 'right' );           
    else :
        $pass_to_js['sidebarWidth'] = /* another number */;
        get_header();
    endif;
    wp_localize_script('your-script', 'js-array-name', $pass_to_js);
    wp_enqueue_script('your-script');
?>

in the code above if elseif and endif lines are giving me errors. /// in my portfolio case

wp_register_script('luna_portfolio', get_template_directory_uri() . '/js/jquery.portfolio.js', 'jquery', true);
        wp_localize_script('luna_portfolio', 'lunaAjax', array('ajaxurl'=>admin_url('admin-ajax.php'),'nonce' => wp_create_nonce('ajax-nonce')));

and the js part

    function luna_getCols(){        
       var cols = 1;
       var windowWidth = jQuery(window).width();        
       if(windowWidth>=380 && windowWidth<1160) cols = 3;
       else if(windowWidth>=1160 && windowWidth<1640) cols = 4;
       else if(windowWidth>=1640 && windowWidth<2100) cols = 5;
       else if(windowWidth>=2100) cols = 6;     
    return cols;
}

Yes, use that code, then in your theme directory you put the files header.php,header-top.php and header-right.php each with the different header code. Read more about templating the header at https://codex.wordpress.org/Function_Reference/get_header.

For the js side of your problem you can pass variables from the php to your js file depending on conditions. Your code would look a little something ... like this:

<?php
    wp_register_script('your-script', $script-url, $dependencies, false, false);
    $pass_to_js = array();               
    if (of_get_option ('header_position','top')) :
        $pass_to_js['sidebarWidth'] = /* a number */;
        get_header( 'top' );            
    elseif (of_get_option ('header_position','right')) :
        $pass_to_js['sidebarWidth'] = 220;
        get_header( 'right' );           
    else :
        $pass_to_js['sidebarWidth'] = /* another number */;
        get_header();
    endif;
    wp_localize_script('your-script', 'js-array-name', $pass_to_js);
    wp_enqueue_script('your-script');
?>

Then in your js file js-array-name will exist as a global array. You refer to the sidebarWidth anywhere as

 js-array-name.sidebarWidth