Position: fixed nav does not stay fixed

问题

I have been having a tonne of issues with a site I'm developing. Even download to slow page loads and such. But the biggest issue I'm having is the behaviour of fixed position elements.

First of all the nav is supposed to stay fixed at all times, but it doens't. It does however appear in the middle of the page if you reload whilst you are scrolled. Very odd.

Live site here

Second of all the background is supposed to stay fixed yet it does not.

Nav code

<div class="navwrapper">
    <nav id="top">
        <div class="wrapper">
            <ul>
                <li><a href="#project" class="scroll">The Project</a></li>
                <li><a href="#makers" class="scroll">The Makers</a></li>
                <li><a href="#markets" class="scroll">The Markets</a></li>
                <li><a href="#workshops" class="scroll">The Workshops</a></li>
                <li><a href="#shop" class="scroll">The Shop</a></li>
                <li><a href="#getinvolved" class="scroll">Get involved</a></li>
            </ul>
    </div></nav>
    <span class="navshadow"></span>
</div>

CSS

.navwrapper{position:fixed;width: 100%;top: 0;}

回答1:

There is a bug in Chrome with position fixed and transforms:

https://code.google.com/p/chromium/issues/detail?id=20574

So you will have to remove the transforms from .label.