HTML中的多个标头

-2

我要编写一个大页眉位于页面顶部的网页。此标题包含导航栏，徽标和网站标题。一旦用户开始滚动，我希望这个切换到一个小标题只有一个导航栏，当用户滚动时，导航栏停留在页面的顶部。我无法找到任何方式在网上做这件事，并认为这可能对我和其他人有趣。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>

这是标题，我想切换到：

<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是用户的页面向下多远。

但是，我不确定如何做到这一点，无法在网上找到它。

来源

2017-06-05 Jannik Wittgen

欢迎来到Stack Overflow！ SO不是免费的编码服务。你必须尝试自己解决问题。如果无法正常工作，请发布您尝试的内容，我们会帮助您解决问题。 – Barmar

嗨，谢谢你的回复！我试过这样做，这说明了我可以如何创建一个将保持在页面顶部的标题。但是，我仍然不知道如何在两个标题（大的和小的固定的标题）之间切换......谢谢！ –

当位置位于页面顶部时，使用一些jQuery将类从相对位置改为固定位置。 –

我想你正在尝试实现一种叫做collapsing header的东西。对于初学者：YouTube tutorial

来源

2017-06-05 23:56:09 David

您是否尝试过使用Bootstrap响应式设计？去看一下。

来源

2017-06-06 00:45:13

HTML中的多个标头

回答

相关问题