无法像 Facebook 那样持久化标头答案

【问题标题】：Unable to persist header like Facebook无法像 Facebook 那样持久化标头
【发布时间】：2014-02-21 19:17:01
【问题描述】：

我目前是一名 JavaScript 初学者。我正在尝试在 Facebook 等各种顶级网站上找到的一些特殊代码逻辑。我在这里找到了其中之一：How does Facebook keep the header and footer fixed while loading a different page?。但我无法正确执行它。以下是我的代码：

<html>
<head>
</head>
<body>
<div id="header">TEST HEADER
<a href="sample2.htm">SAMPLE</a></div>
<p>OUTSIDE</p>
    <script type='text/javascript'>
        var header = document.getElementById('header');
        var headerLinks = header.getElementsByTagName('a');

        for (var i = 0, l = headerLinks.length; i < l; i++) {
            headerLinks[i].onclick = function () {
                var href = this.href;

                //Load the AJAX page (this is a whole other topic)
                loadPage(href);

                //Update the address bar to make it look like you were redirected
                location.hash = '#' + href;

                //Unfocus the link to make it look like you were redirected
                this.blur();

                //Prevent the natural HTTP redirect
                return false;
            }
        }
</script>
</body>
</html>

请告诉我我做错了什么？

实际上，我的代码的动机不仅是在页面上保留标题，而且在导航到其他页面时也是如此。导航到其他页面时不应重新加载标题。

Bill F. 的答案中的解决方案：

忘记定义loadPage()函数：

<script type="text/javascript">
        function loadPage() {
            document.getElementById("content").innerHTML = '<object type="type/html" data="sample2.htm" ></object>';
        }
    </script>

【问题讨论】：

查看 CSS 定位：alistapart.com/article/css-positioning-101
实际上它不是 CSS 标头持久化技术。我想要链接问题中提到的效果。 CSS 只会向上保持标题，但是当您单击该页面上的链接时，它将重新加载标题。在 Facebook 中，标题在导航到其他页面时仍然存在。只有内容发生变化。
查看 AJAX：developer.mozilla.org/en-US/docs/AJAX
实际上这个代码不是工作代码。但它对我不起作用，因为我认为我没有在正确的位置调用脚本。我想知道我应该在哪里调用脚本？
查看单页应用

标签： javascript jquery html css facebook

【解决方案1】：

你没有定义函数loadPage 是你做错了。据推测，该函数将使用 AJAX 来检索页面的内容，无论是 JSON、HTML、XML、CSV 等。

【讨论】：

抱歉，其实我不是 JS 专家，也不知道它是用户自定义函数。谢谢:)
@AishwaryaShiva 很高兴。 ;)

【解决方案2】：

即使在使用 position:fixed

滚动时，您也可以保持 div 的位置固定

#header
{
position:fixed;
}

【讨论】：

实际上我的代码的动机不仅仅是在页面上保留标题，而且在导航到其他页面时也是如此。导航到其他页面时不应重新加载标题。

【解决方案3】：

我已经成功地做到了，您需要做的就是创建 2 个单独的容器 div，1 个用于导航栏（您想要保留），2 个用于您想要更改的内容，然后只需从外部页面

代码表示

<div class="container_for_persistent_nav-bar">
</div>

<div class="container_for_divs_that_are_not_persistent">
</div>

然后只需将点击事件绑定到链接上

【讨论】：