Question

我正在研究我的新产品组合，虽然它还远没有完成，但我已接近完成设计。只有一个问题，我不知道如何摆脱。如果您转到http://minimalito.be/index.html，您将转到主页，然后当您点击“关于”时，您会发现页脚非常短暂地跳到我的页面顶部...

当您从主页转到about部分时，不仅页脚移动，而且整个内容会短暂移动。谁会知道为什么？内容加载了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">minimalito@info.be</h1>

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

            <div id="page">


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

          </div>

    </div>

Answer 1

您的#header有一个固定的位置，因此它不属于文档流程的一部分。 #content有一个上边距，可以推动#content和#footer向下，以便它们位于#header#下方。

现在当您点击fadeOut顶部#content上的其中一个菜单链接时，display: none;会在其上设置#footer。没有任何东西可以推送作为文档流程一部分的元素了fadeOut一直移动到页面顶部，直到新内容被异步加载。

不要将display设置为none到opacity，而只需更改{{1}}并在元素不可见时替换内容。

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

1 个答案: