0

我正在制作我的新作品集，虽然它还远未完成，但我正在接近完成设计。只有一个问题 atm 我不知道如何解决。如果你去http://minimalito.be/index.html你会去主页，然后当你点击“关于”时，你会注意到页脚非常短暂地跳转到我的页面顶部......

当您从主页转到 about 部分时，不仅页脚会移动，而且整个内容也会短暂向上移动。有人会知道为什么吗？内容是用ajax加载的，所以这可能与它有关，也许我定位一些div错误？我真的没有看到它。

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

谢谢！

    <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">minimalito@info.be</h1>

          </div>
            <div id="load">Loading</div>

            <div id="page">


            </div>
            <div id="footer">

          </div>

    </div>
4

1 回答 1

0

您#header的位置固定，因此它不是文档流的一部分。 有一个顶边距，可以同时向下#content推，以便它们位于下方.#content#footer#header#

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

而不是fadeOut设置display考虑在元素不可见时none仅更改和替换内容。opacity

于 2013-02-18T13:41:08.897 回答