I'm working on my new portfolio and although it's far from finished, i'm getting close to finishing the design. There's just one problem atm that I don't know how to get rid of. If you go to http://minimalito.be/index.html you'll go to the homepage, then when you click on 'about' you'll notice that the footer very briefly jumps to the top of my page...
When you go from the homepage to the about section, not only the footer moves, but the whole content briefly moves up. Would anyone know why? The content is loaded with ajax, so that's probably got something to do with it, maybe i'm positioning some divs wrong? I don't really see it.
This is rough layout of my code, for more detailed code + example, you can check the website itself of course.
Thnx!
<div id="content" class="block">
<div id="header">
<nav class="centered">
<h2><a href="index.html" class="menuLink">minimalito.</a></h2>
<ul>
<li><a href="design.html" id="aboutLink" class="menuLink">about.</a></li>
<li><a href="work.html" id="workLink" class="menuLink">work.</a></li>
<li><a href="#" id="contactLink">contact.</a></li>
</ul>
</nav>
<h1 id="contact" class="ninja">[email protected]</h1>
</div>
<div id="load">Loading</div>
<div id="page">
</div>
<div id="footer">
</div>
</div>
Your #header has a fixed position so it is not part of the document flow.
#content has a top margin that pushes both #content and #footer down so that they are positioned below #header#.
Now when you click on one of the menu links at the top fadeOut is called on #content which sets display: none; on it. With nothing left to push elements that are part of the document flow down anymore #footer is moved all the way to the top of the page until the new content is asynchronously loaded.
Instead of having fadeOut set display to none consider just changing the opacity and replace the content when the element is invisible.