Javascript HTML中的多个标题

我要编写一个网页，其中一个大标题在页面顶部。此标题包含导航栏、徽标和网站标题。一旦用户开始滚动，我想切换到一个只有导航栏的小标题，当用户滚动时，导航栏会停留在页面顶部。我在网上找不到任何方法来做这件事，我想这对我和其他人来说可能会很有趣

这是第一个大标题，带有css代码：

    <style>
    header {
    background-color: #0097A7;
    color: #ffffff;
    padding: 2%;
    text-align: center;
    }

    h1 {
    font-size: 270%;
    margin: 2% 0;
    }

    nav {
    background-color: rgba( 255, 255, 255, .4);
    border-radius: 25px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Neuton', serif;
    font-weight: bold;
    }

    nav a {
    color: #fff;
    display :inline-block;
    font-size: 100%;
    font-weight: bold;
    padding: 1% 4%;
    }

    nav a:hover {
    background-color: rgba( 255, 255, 255, .4);
    box-sizing: border-box;
    border-radius: 25px;
    }

    </style>

    <header>
      <h1><img alt="Logo" class="logo" height="50" src="media/logo.png">
      Fish & Chips </h1>
     <nav>
        <a href="index.php">Home</a>
        <a href="gallery.php">Gallery</a>
        <a href="about.php">About Us</a>
        <a href="contact.php">Contact Us</a>
      </nav>
    </header>

其中xPos是指用户在页面下方的距离

---

但是，我不确定如何执行此操作，并且无法在网上找到它。

我认为您正在尝试实现一种称为折叠标头的方法。对于初学者：

您是否尝试过使用引导响应式设计？查看它们。

欢迎来到Stack Overflow！所以这不是免费的编码服务。你必须自己尝试解决这个问题。如果你不能让它工作，张贴你尝试了什么，我们会帮你修复。你好，谢谢你的回复！我试过这样做，这解释了我如何创建一个标题，它将粘贴到页面顶部。但是，我仍然不知道如何在两个标题之间切换（大标题和小标题…），谢谢！！当位置位于页面顶部时，使用jQuery将类从相对更改为固定。您至少可以为我们提供一些代码吗？好的，我已经添加了一些代码，并试图更好地解释我想要做什么。希望这会有所帮助。

    <header>
     <nav>
        <a href="index.php">Home</a>
        <a href="gallery.php">Gallery</a>
        <a href="about.php">About Us</a>
        <a href="contact.php">Contact Us</a>
      </nav>
    </header>

    <style>
    nav {
      position:fixed;
      top:0px;
    }
    </style>

    if (xPos > 0){
    switch to small, fixed header
    } else{
    switch to large header
    }