Question

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 http://stage.golishlaw.com/portfolio/

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

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

This one worked well on some monitor sizes but not others.

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
});

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)

I’ve just really been pulling my hair out on this one and I’ve tried everything that I could think of.

Answer 1

You’re already defining the left position with CSS: absolute; left: 50%; margin-left: -401px; So add this CSS to your #portfolio_nav rule to center it vertically:

top: 50%;
margin-top: -80px;

Make sure to comment out the jQuery code which sets the top CSS property otherwise it will override the CSS rule.

margin-top calc: Each list item has around 40px (height + padding-bottom) so 4 li * 40 = 160 / 2 = -80px margin-top. Or just subtract 20px each time you add a list item. Of course, this calc can be done through jQuery setting the marginTop later if you need to add list items dynamically.

If you want an even more accurate vertical center, you can do the maths not accounting for the padding-bottom of the last list item as its padding-bottom is not visible. margin-top:-70px is slightly more centered.

---

Update to center it vertically in the browser window while respecting the container restriction:

$(function() {
    var $pnav = $('#portfolio_nav'),
        $w = $(window);
    $pnav.css('top', 0);
    $w.scroll(function() {
        var $p = $pnav.parent(),
            pptop = parseInt($p.css('paddingTop'), 10),
            ppbottom = parseInt($p.css('paddingBottom'), 10),
            pheight = $p.height(),
            pnavheight = $pnav.height();
        $pnav.css('top', $w.height()/2 - ($p.offset().top + pptop) - pnavheight/2 + $w.scrollTop());

        var pnavpostop = $pnav.position().top;
        if (pnavpostop < pptop) $pnav.css('top', pptop);
        else if (pnavpostop + pnavheight > pptop + pheight + ppbottom) $pnav.css('top', pheight - pnavheight);
    }).scroll();
});

Fiddle