使用ajax，页脚和内容加载内容短暂地向上移动

我正在研究我的新投资组合，虽然它远没有完成，但我正在接近完成设计。只有一个问题，我不知道如何摆脱。如果你去http://minimalito.be/index.html你会进入主页，然后当你点击'关于'你会注意到页脚跳到我的页面顶部...使用ajax，页脚和内容加载内容短暂地向上移动

当你从主页到大约节，不仅页脚移动，而且整个内容短暂地移动。有人会知道为什么吗？内容加载了ajax，所以这可能与它有关，也许我定位一些div错了？我真的没有看到它。

这是我的代码的粗略布局，对于更详细的代码+示例，您当然可以检查网站本身。

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>

来源

2013-02-18 Jack

您的#header具有固定位置，因此它不是文档流的一部分。 #content有一个顶部边距，它会将#content和#footer向下推，以使它们位于#header#以下。

现在，当您点击顶部的菜单链接fadeOut之一被调用#content其上设置display: none;就可以了。没有任何东西可以将文档流中的元素向下推动#footer一直移动到页面的顶部，直到新内容异步加载。

而不必fadeOut的设置display到none考虑只是改变了opacity当元素是不可见的更换内容。

来源

2013-02-18 13:41:08 hsan

是的，完美的作品！ Thnx队友。尽管如此，还有一件事。当从主页转到关于页面时，内容仍然在短时间内与我的“口号”重叠，然后它将自己调整到正确的位置。即使我现在使用fadeTo而不是fadeIn或fadeOut。 – Jack 2013-02-18 16:29:12

它实际上并不是被移动的＃页面，而是浏览器向下滚动。你的*关于*链接链接到锚点'＃design'，并且在你的头版你有一个'div＃design'。 – hsan 2013-02-19 08:16:59

使用ajax，页脚和内容加载内容短暂地向上移动

回答

相关问题