jQuery: Detect element's height when window is resized
<p>I need help with the following issue.</p>

<p>I'm creating a responsive site. Its structure is quite basic: header, nav bar, body and footer.</p>

<p>In the header I have several elements and all these elements use percentages for their dimensions, so the <em>height</em> of the header is determined by the height of the elements inside of it.</p>

<p>For the nav bar I plan to use a "sticky" script, so when you scroll the page, the nav bar 'sticks' to the top of the page, and once you go back all the way up, it 'unsticks' and appears under the header.</p>

<p>So far, so good.</p>

<p>Thing is that the sticky script depends on the <em>height</em> of the header in order to correctly stick the nav bar under the header. So when I resize my window to test the responsiveness of the layout, the sticky nav bar goes crazy.</p>

<p>What I need is a way to detect the <strong><em>height</em></strong> of the header and modify the DOM by creating a style on the <code>&lt;header&gt;</code> ie. (<code>&lt;header style="height:198.3px"&gt;</code>), and assign a dynamic height to it as I resize the browser window.</p>

<p>I think this is something that would be accomplished using the <code>height();</code> property, but I'm not a jQuery guru so I'm not sure if that would work.</p>

<p>Any help is greatly appreciated.</p>

<p>PS. BTW, Stackoverflow.com uses this 'sticky' feature on the boxes on the right column when you're creating/editing a post.</p>
