Add static margin together with scaling margin

Question

Currently i'm having a header that scales with the side width with the following code:

header {
    padding: 5%;
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 2vw;
    font-family: cursive;
    background-image: url("/wordpress/wp-content/themes/eget-wordpress/images/header.png");
    background-size: cover;
  }

And i have a sidebar that follows on scrolling, that currently has the following code:;

#ttr_sidebar
{
margin-right: 2%;
position: fixed;
right: 0;
top: 25vw;
border-style: solid;
max-width: 23%;
}

At a window width of exactly 1080px, the sidebar lines up perfectly with the header when you are on the top of the page, but the margin doesn't scale properly with the page width. At a lower page width, it overlaps with the header (which partially can be solved with z-index, but that could block some sidebar content instead), and at a greater width, it gets a top margin.

I would like to use the % or vw option on the sidebar top margin, but put a different scaling factor. Or i guess that there is some fairly simple trick to make it only go as high as the bottom of the header is.

How can i solve this?

Edit: I realized that the cause is probably the static height navigation bar i have under the header. Is there some way to add a scaling top margin with a static top margin on the sidebar?

I got the page on http://www.simontuomi.site/wordpress/historia/ if you want to check on a PC. Hard to scale on a phone though i guess.

Otherwise i got screenshots here.

Small window: http://www.simontuomi.site/Images/small.jpg

Big window: http://www.simontuomi.site/Images/big.jpg