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中的多個標頭

回答

相關問題