Javascript 在页面中导航时保持固定位置的标题（永远不会重新加载）_Javascript_Jquery_Html_Css_Header

Javascript 在页面中导航时保持固定位置的标题（永远不会重新加载）

javascript jquery html css

Javascript 在页面中导航时保持固定位置的标题（永远不会重新加载）,javascript,jquery,html,css,header,Javascript,Jquery,Html,Css,Header,我发现所有页面都有相同的标题，在浏览页面时从不重新加载。页眉加载一次后，它将保持不变，其余布局（内容和页脚）将从一页加载到另一页。这很像你有一个框架集，但它不是。鼠标悬停在上面的菜单上，点击任何项目，你就会明白我的意思这种技术叫什么？我想知道它的名字，这样我就可以研究和了解它谢谢。使用的技术是Angular JS。如果你想学习这项技术，你可以使用或。如果要查看页面源代码，可以右键单击，然后转到“检查”，右键单击，然后转到“检查”“查看页面源代码”。通过检查，您将看到后端发生的实时更改

我发现所有页面都有相同的标题，在浏览页面时从不重新加载。页眉加载一次后，它将保持不变，其余布局（内容和页脚）将从一页加载到另一页。这很像你有一个框架集，但它不是。鼠标悬停在上面的菜单上，点击任何项目，你就会明白我的意思

这种技术叫什么？我想知道它的名字，这样我就可以研究和了解它

谢谢。

使用的技术是Angular JS。如果你想学习这项技术，你可以使用或

。如果要查看页面源代码，可以右键单击，然后转到“检查”，右键单击，然后转到“检查”“查看页面源代码”。通过检查，您将看到后端发生的实时更改

您可以通过

对于您建议的站点，将有三层

形象

标题（鼠标悬停时向下滚动）

背景图像（由标题隐藏）

我不知道这个人是如何做到的，但你如何做到这一点是：当用户单击菜单项时，使用ajax加载内容（无刷新）

您可以更新url：

这将在不刷新的情况下更新url

如果用户登录到特定的url，您可以根据url传递所需的数据以加载正确的内容。

查看您提交的网站后，我能够找到一个javascript文件，正如许多人建议的那样，该文件使用ajax将内容加载到页面中而无需重新加载，加载网页后，脚本会触发hashchange，该脚本会更改url以匹配您使用@escapedcat建议的

window.history.pushState

单击的url，javascript还会处理动画并更改网页中某些元素的类以反映其状态（更新等）

代码是丑陋的，但你仍然可以看到这是如何做到的

编辑

index.html


第1页
这是默认内容
$（'nav a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
console.log（'test'）；
$.get（this.href，函数（数据）{
$（'#content'）.html（数据）；
console.log（this）；
pushState（{foo:'bar'，第二页，'page.html'）；
});
});

page.html


第2页
这是第2页

以上更改了url，您仍然需要进一步开发代码以获得完整的功能，即（后退按钮）

您可以参考添加此类功能

编辑：

当文档声明pushState方法接收3个参数时，一个状态对象包含与新历史记录条目、页面标题和页面url关联的序列化信息，每次用户导航到一个新的历史记录条目时，popstate方法都会被激发，并且状态会改变以表示当前状态，您也可以使用它

他们自己的网站是用meteor.js建立的，你可以清楚地看到你想要的功能

这种技术被称为“水疗”。您可以使用任何希望使用的框架或库（例如AngularJS、ReactJS、jQuery等）创建SPA，只要遵循一些指导原则即可

单页应用程序（SPA）是指适用于单个网页，目的是提供更流畅的类似于桌面应用程序的用户体验。在水疗中心，或者必要的代码–HTML、JavaScript和CSS–通过单页加载，或动态加载相应的资源根据需要加载并添加到页面，通常是为了响应用户行动

假设我们没有提前加载所有内容，基本准则如下：

当服务器第一次加载页面时，您将破译URL并返回相应的页面。页面应该包含所有页面的相同模板，而html文件中只有一个专用部分是为动态内容保留的。

例如，我的网站中的所有页面都应该返回相同的标题并加载相同的javascript文件，根据URL，更改的部分只是我的
```
#content
```
元素，它包含特定页面的html

当用户单击内部链接时，您将执行以下操作：

使用
```
event.preventDefault（）
```

使用（

history.pushState（stateObj，title，path）

）自己更改URL

使用Ajax加载内容，并用新内容替换现有内容

收听以检测由于使用后退和前进按钮而导致的URL更改。（

window.addEventListener（'popstate'，handler）

）

根据新URL加载内容

注意：服务器需要使用Ajax提供内容（不包括模板的其余部分）

关于“如何”，这完全取决于您是否了解水疗中心的工作流程。

该网页是使用PHP创建的。谢谢，我会看一看。我知道页面是用php编写的，但是这种技术也可以用于html页面？我试着把网站下载到我的电脑上，但是菜单在这里都不显示。是的，你可以在HTML页面上实现它。它不工作的原因是因为JQuery文件必须是外部的。他所做的是JQuery（隐藏和显示方法），您可以查看上面的站点了解更多信息。希望您已经得到您的答案：-）URL更改是通过完成的。看起来它加载了一个不同的页面，但实际上不是。它只是用JavaScript操纵URL。该网站确实使用php，这就是为什么下载它的原因

$(document).ready(function(){
    $("menu-item").click(function(){
          $("#content").load("something");
    });
 });

window.history.replaceState(“object or string”, “Title”, “/another-new-url”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page 1</title>
</head>
<body>
    <header>
        <nav><a href="page.html">Link</a></nav>
    </header>
    <div id="content">
        this is the default content
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
    $('nav a').on('click', function(e){
        e.preventDefault();
        console.log('test');

        $.get(this.href, function(data){
            $('#content').html(data);
            console.log(this);
            history.pushState({foo:'bar'}, 'second page', 'page.html');
        });

    });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page 2</title>
</head>
<body>
    This is page 2
</body>
</html>