Sticky.js width:100% nav no longer 100% after resize of browser

Question

I have implemented a width:100% nav bar that closely mimics the nav bar found on this site: (http://halfcreative.themes.bitfade.com/).

My nav bar is to be made sticky upon the nav reaching the top of the page and this is quite successfully implemented by Anthony Garand's sticky.js plugin. So no problems there.

However I am having trouble when I resize my browser when the nav has been made "sticky" it seems to lose its width:100% style and just fail to be responsive. It is responsive when you have not activated the sticky.js by scrolling down.

I have setup a JSFiddle (link below). Why this is happening?

http://jsfiddle.net/shRzE/1/

Some of my HTML markup

<nav class="nav" id="sticky-navigation">

            <div class="navigation inner">
                <ul>
                    <li><a rel="competition" href="">Competition</a></li>
                    <li><a rel="worldbid">The Bid</a></li>
                    <li><a rel="logistics" href="">Logistics</a></li>
                    <li><a rel="workflow" href="">Workflow</a></li>
                    <li><a rel="lens" href="">Lens to Living Room</a></li>
                    <li><a rel="build" href="">The Build</a></li>
                </ul>
            </div>
        </nav>

Note: I find that you can see the problem the best if you make the "Result" square as large as possible then.

1. scroll down until half area is red and half area is black so menu is vertically in the middle of the screen and resize the "Result" box to see nav working nicely at 100%.

2. Keep scrolling until nav sticks to top of window. Then resize "Result" box again to find that it no longer resizes nicely.

Note: I also implemented Bootstraps Affix and had exactly the same problem.

Answer 1

Try adding

left: 0px;
right: 0px;

To your position fixed element, so something like this:

#element {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
}

It seems that for some reason the widths of the position: fixed; element was not being registered by the browser so rooting the left and right position to the edge of the view-port means the browser always knows how wide the element is and can then correctly center your content.

Answer 2

Try adding the jquery options when calling it:

  $("#topBar").sticky({ 
    getWidthFrom: '.wrapper',
    responsiveWidth: true
     });

with #topBar being your sticky item and .wrapper being a full width element.