Centering a div within another div while scrolling
<p>I am trying to center the navigation within the main content div and have it stuck there while scrolling. The problem that I just can't wrap my head around is that it needs to be parallaxy because of the header and the footer. I have a staging environment <a href="http://stage.golishlaw.com/portfolio/" rel="nofollow">http://stage.golishlaw.com/portfolio/</a>  </p>

<p>I cannot write down everything that I have tried but some of the most recent stuff is:</p>

<pre><code>var _mainHeight = (($(window).height()/2) - ($("#portfolio_nav").height()/2)) + (($("#main").offset().top - $(window).scrollTop()))
$("#portfolio_nav").css({
    top: _mainHeight
});</code></pre>

<p>This one worked well on some monitor sizes but not others.</p>

<pre><code>var mainScrollTop = (($(window).scrollTop() - $("#main").offset().top));
mainScrollTop = mainScrollTop > 0 ? 0 : mainScrollTop;
var _mainHeight =  ((($(window).height() )/2 - $("#portfolio_nav").height()/2) + $("#main").offset().top) + mainScrollTop
$("#portfolio_nav").css({
    top: _mainHeight
});</code></pre>

<p>This one work pretty well to but the nav got stuck at a certain spot (I know why I just can't figure how to get it stuck in the center of the screen)</p>

<p>I've just really been pulling my hair out on this one and I've tried everything that I could think of.</p>
