Q:

Change the position of the header section with proportion to visible content section

I am in a situation what I can't figure this out. I have two .content div . First content div have header and some hidden block content. 
2nd content div have 4 buttons. Clicking this each buttons bring up the related blocks. Blocks have different margin-top which is on my requirement. 
what I am wanting is the header should keep the same distance proportion with all the blocks.
Like if "Block four button" is pressed Block 4 content will show and Header will move down keeping the same margin like block 1 do.
 
I tried with position fixed but his doesn't work that way.
Is this possible to Change the position of the header based on each Block content keeping the proportion with the help of jquery or js ? It would be really helpful for me. I am stuck on this really bad. I am not very good on jQuery and not able to make if this can be done with jquery.
FIDDLE
HTML
<div class="content">
    <div class="head">Head</div>

    <div class="block" id="blk-1" style="margin-top:10px;">
        Block 1 Content
    </div>
    <div class="block" id="blk-2" style="margin-top:50px;">
        Block 2 Content
    </div>
    <div class="block" id="blk-3" style="margin-top:80px;">
        Block 3 Content
    </div>
    <div class="block" id="blk-4" style="margin-top:120px;">
        Block 4 Content
    </div>
</div>

<div class="content">
    <button type="button" class="blk-1"> Block One </button> 
    <button type="button" class="blk-2"> Block Two </button> 
    <button type="button" class="blk-3"> Block Three </button>
    <button type="button" class="blk-4"> Block Four </button>

</div>

CSS
.content{
    width:30%;
    float:left;
    margin-right:10px;
}
.head{
    background:red;
    height:20px;
}
.block{
    height:40px;
    background:#20ccfc;
    display:none;
}
button{
   margin-bottom:5px;
}

js
$('.blk-1').click(function(){
    $(".block").hide();
    $("#blk-1").fadeIn();
});
$('.blk-2').click(function(){
    $(".block").hide();
    $("#blk-2").fadeIn();
});
$('.blk-3').click(function(){
    $(".block").hide();
    $("#blk-3").fadeIn();
});
$('.blk-4').click(function(){
    $(".block").hide();
    $("#blk-4").fadeIn();
});

A:

Is this what you're looking for?
I took off the inline style attributes and put it in the css, making the position of the .block divs based on the header's position.  You can modify the header's position by adding an extra jquery function in each click event.

