HTML

时间:2017-06-05 23:50:40

标签: javascript html css header web

我要编写一个网页,其中一个大标题位于页面顶部。此标题包含导航栏,徽标和网站标题。一旦用户开始滚动,我希望切换到只有导航栏的小标题,当用户滚动时,导航栏会保留在页面顶部。我无法在网上找到任何办法,并认为这对我和其他人来说可能很有趣。

这是大型的第一个标头,带有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>

这是我想切换到的标题:

    <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>

我不确定如何在这两个标题之间切换。我认为它可能是简单的jquery,如:

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

其中xPos是用户所在页面的距离。

但是,我不确定如何做到这一点并且无法在线找到它。

2 个答案:

答案 0 :(得分:1)

我认为你正在尝试实现一种称为折叠标题的东西。对于初学者:YouTube tutorial

答案 1 :(得分:0)

您是否尝试过使用Bootstrap响应式设计?检查一下。