Clear a Fixed Nav

At the moment in my page I have a fixed nav at the top followed by a content div using the following css:-

.nav{
width:100%;
position:fixed;
}

.content{
padding-top:40px;
}

The nav has auto height and expands based on what the user types into the input which is inside it although initially it is 40px high hence the reason the content has a margin top of this value so that it can “clear” the nav and be visible.

What I want is for the nav to be fixed so that as the user scrools the page the nav is always anchored to the top of the page however when the user scrolls to the very top I want the padding top of the content to match the navs height i.e. if the nav expands to 200 px high the padding-top of the content will also be 200 px high. Is there any way to do this via css or is a javascript solution necessary?

Also in #CSS _↴