Close Menu
網上營銷專家 BLOG網上營銷專家 BLOG

    訂閱最新賺錢貼士

    獲取網上營銷專家 Online Marketing Leader 最新 網上創業 | 小本創業 | 批發 | 代購 | 網上推廣 | SEO | Dropshipping | 賺錢 | 網店製作貼士!

    熱門討論

    預先做好網上創業準備:為何比失業後再考慮更有利?

    October 21, 2024

    沒有網上快速致富的方法 – 不要落入“輕鬆賺錢”的陷阱!

    October 8, 2024

    為什麼要自己學懂在韓國直接以批發價入貨或直接從韓國時裝批發 agent 補貨?

    October 8, 2024
    Facebook Instagram YouTube WhatsApp
    網上營銷專家 BLOG網上營銷專家 BLOG
    Trending
    • 預先做好網上創業準備:為何比失業後再考慮更有利?
    • 沒有網上快速致富的方法 – 不要落入“輕鬆賺錢”的陷阱!
    • 為什麼要自己學懂在韓國直接以批發價入貨或直接從韓國時裝批發 agent 補貨?
    • 在網上銷售韓國時裝是需要講求技巧的
    • 為什麼要自己學懂營運及製作網上時裝店?
    • 10 個頁面會影響全站排名嗎?
    • Pod Digital Media 如何利用創新為品牌提供有意義的聯繫
    • ChatGPT 幫助您開展業務的 5 種方式
    Facebook Instagram YouTube WhatsApp
    • 首頁
    • 網店創業
      • 日貨網店創業課程
      • AI 韓國時裝網店創業課程
      • Amazon FBA 網店創業課程
      • AI Dropshipping 網店創業
      • 零成本網上創業
    • 網上推廣
      • Facebook 廣告行銷推廣課程
      • Canva 社交媒體應用課程
      • AI 數碼內容營銷課程
      • 社交媒體推廣
      • 多媒體推廣
      • 網上營銷
      • 聯盟行銷
    • 韓國批發
      • 3日2夜韓國批發創業課程
      • 韓國童裝批發代購課程
      • 韓國供應商資料
    • 日本批發
    • 泰國批發
    • 廣州十三行批發
    • 被動收入
    • SEO 優化
    • 折扣優惠
    網上營銷專家 BLOG網上營銷專家 BLOG
    Home » 如何使用 CSS 創建簡單的黏性標題:2024 年完整教程
    聯盟行銷

    如何使用 CSS 創建簡單的黏性標題:2024 年完整教程

    onlineadminBy onlineadminMarch 26, 202403 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp Reddit Email
    Share
    Facebook Twitter LinkedIn Pinterest Email

    想用 CSS 製作黏性標題嗎?

    沒問題。

    您只需將此 CSS 新增至標頭 HTML 即可:

    header 
      position: sticky;
      top: 0;
      

    在本文中,我們將更深入地從頭開始創建 CSS 黏性標頭。 您還將了解如何在 WordPress 中做到這一點。

    讓我們深入了解一下。

    建立 HTML 和 CSS 黏性標頭

    當人們向下滾動頁面時,黏性標題將黏在瀏覽器頂部。 這非常適合始終顯示黏性導航選單,從而提供更好的用戶體驗。

    讓我們看一下程式碼。

    超文本標記語言

    這是 HTML 的基本範例:

    <header>
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>

    主容器是一個 <header> 它有一個簡單的 <h1> 對於徽標和 <nav> 用於導航菜單。

    重要的元素是 <header> 因為這就是我們將分配 CSS 以使其具有黏性的內容。 這個元素裡面的內容取決於你; 固定標題將保持不變。

    稍後我們將添加更多 HTML 和 CSS 以添加一些樣式並查看 CSS 黏性標題滾動的實際效果。

    使用 CSS 的黏性標題

    CSS

    現在讓我們再看一下 CSS:

    header 
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
    

    我們可以將標題部分定位為 標頭 並添加具有 Sticky 屬性的 CSS 位置元素和 頂部:0 使其黏在頁面頂部。

    我們還可以添加 地點:-webkit-sticky Safari 瀏覽器支援和舊版瀏覽器。

    位置:組合黏性作品 位置:相對 和 位置:固定 一起。 這意味著該元素將充當相對元素,直到使用者開始滾動。 然後它保持固定在頂部或您定義的任意像素 頂部:0。

    這裡有一些程式碼可以為標題添加更多樣式。 這將添加文字和背景顏色,添加一些填充,並對齊徽標和導航。

    header 
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
      background-color: #000;
      color: #fff;
      padding: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    

    這是最終的標題 CSS,我們將在帖子中進一步解釋:

    header 
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
      background-color: #000;
      color: #fff;
      padding: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: padding 0.3s ease;
    
    header.scrolled 
      padding: 5px 25px; /* Adjusted padding when scrolled */
    
    header h1 
      margin: 0;
      padding: 0;
      font-size: 24px;
      text-align: center;
    
    nav ul 
      list-style: none;
      padding: 0;
      text-align: center;
    
    nav ul li 
      display: inline;
      margin: 0 10px;
    
    nav ul li a 
      color: #fff;
      text-decoration: none;
    
    nav ul li a:hover 
      text-decoration: underline;
    

    JS改變滾動高度

    想要在滾動時縮小標題的大小嗎?

    沒問題。

    這裡有一些 JavaScript 可以讓它運作:

    window.addEventListener('scroll', function() 
     // Select your header
     var header = document.querySelector('header');
    
     // Check if the scroll position is greater than 50 pixels
     if (window.scrollY > 50) 
      // Add a CSS class to reduce header size
      header.classList.add('scrolled');
      else 
      // Remove the CSS class to restore header size
      header.classList.remove('scrolled');
     
    );

    這將縮小標題的大小,以便它不會佔用頁面上不必要的空間,同時保持導航在視圖中。

    讓我們把它分解一下,看看它是如何運作的:

    1. window.addEventListener('scroll', function() ... ):這是一個事件監聽器,當視窗滾動時觸發。
    2. var header = document.querySelector('header'):該行選擇 標頭 來自 HTML 文件的元素並分配 標頭 變量,允許稍後在程式碼中將其作為目標。
    3. if (window.scrollY > 50) ... else ... :此條件檢查垂直滾動位置是否大於 50 像素。 如果是,則執行第一個區塊內的程式碼; 否則,裡面的程式碼 別的 塊被執行。

    您還需要添加此 CSS,因為它將定義滾動後標題的大小:

    header.scrolled 
      padding: 5px 25px; /* Adjusted padding when scrolled */
    

    要在標題變小時添加效果,請將這段 CSS 添加到 標頭 標籤:

    header 
      transition: padding 0.3s ease;
    

    codePen 上的 CSS 黏性標題演示

    以下是一個 CodePen 演示,可讓您了解這一切的實際效果:

    您可以隨意編輯程式碼並使其成為您自己的程式碼。

    具有黏性標題的表格的 CSS

    如果您正在尋找表格的固定標題,這裡是它的程式碼。 您可以在這裡找到演示 。

    使用 CSS 的黏性標題表

    它的工作方式與上面相同,使用 位置: 黏性 和 頂部:0, 但這一次,它被分配給標題單元格。

    如何使用 Inspect 元素使任何標頭黏性

    如果您已經擁有一個標題不固定或不固定的網站怎麼辦?

    無論是您自己的網站還是您正在開發的網站,您都可以使用檢查元素工具將標題設為黏性。

    Chrome 和 Firefox 等瀏覽器內建了此功能,因此您可以在將程式碼儲存到後端之前對其進行測試。

    只需在瀏覽器中右鍵單擊並選擇“檢查元素”:

    檢查元件

    然後點擊檢查圖示:

    將滑鼠懸停在標題上並點擊以定位該元素:

    突出顯示 HTML 元素

    該元素將顯示在樣式編輯器中。 添加 CSS 程式碼以使標題固定在頁面頂部:

    將 CSS 加入瀏覽器元素

    現在,當您向下捲動頁面時,您的標題將保持固定。 您需要在主樣式表中更新此程式碼,以使其適用於所有人。

    WordPress 中的 CSS 黏性標題

    如果您的網站使用 WordPress,您可能有一些選項可以使您的標頭具有黏性。

    Astra、OceanWP 和GeneratePress 等 WordPress 主題都提供此選項。 您所要做的就是在主題定制器中啟動它。

    這是在GeneratePress 中的樣子:

    黏性標題主題 支持

    但是,如果您的 WordPress 主題不支援它,您可以將上面的程式碼新增至自訂器內的附加 CSS 中。

    為 WordPress 主題添加額外的 CSS

    如果你想在向下滾動時縮小標題,可以添加上面的 JavaScript。 您需要將 JS 添加到主題文件中,或者您可以使用簡單自訂 CSS 和 JS 等插件。

    或者,您可以使用 WordPress 外掛程式 Sticky Men你 & 黏性標題 為您完成所有工作。

    您所要做的就是在插件設定中添加 CSS 屬性,然後就完成了。

    結論使用 CSS 創建黏性標題

    建立 CSS 黏性標題是改善使用者體驗的好方法。

    當人們向下捲動頁面時,它可以將導航保持在視圖中,從而提供對網站上重要頁面的存取。

    這篇文章向您展示了 如何從頭開始使用 CSS 建立黏性標題 以及如何將程式碼新增到現有標頭中。



    Source link

    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    onlineadmin
    • Website

    Related Posts

    Adsterra 插頁式廣告 + iGaming 流量 = 236.12% 投資報酬率

    June 6, 2024

    2024 年 SEO 中如何使用 Do Follow 和 Nofollow 的 7 個場景

    June 4, 2024

    這是 2024 年最好的視訊轉換器嗎?

    June 4, 2024
    Add A Comment
    Leave A Reply Cancel Reply

    Top Posts

    預先做好網上創業準備:為何比失業後再考慮更有利?

    October 21, 2024

    沒有網上快速致富的方法 – 不要落入“輕鬆賺錢”的陷阱!

    October 8, 2024

    為什麼要自己學懂在韓國直接以批發價入貨或直接從韓國時裝批發 agent 補貨?

    October 8, 2024
    Don't Miss

    預先做好網上創業準備:為何比失業後再考慮更有利?

    By onlineadminOctober 21, 2024 網店創業

    在不確定的經濟環境中,越來越多的人開始探索網上商業模式,期望能夠賺取額外收入,甚至轉變成全職事業。然而,很多人在失業或工作不穩定時才開始考慮創業,這種做法其實存在一些潛在風險和挑戰。相反,預先做好網上創業的準備,無論你目前的職業狀況如何,都能讓你在面對不確定性時更具彈性和應對能力。 在這篇文章中,我們將深入探討為何預先做好網上創業的準備,比起等到失業或面對工作危機時才考慮,會為你帶來更多優勢。 1. 掌握主動權,避開被動局面 一個人在失業後才決定創業,往往是在沒有其他選擇的情況下做出的選擇,這樣的創業動機可能較為被動。當你在職場上仍有穩定收入時開始準備創業,你便能以更從容的心態去進行市場調查、產品開發和品牌規劃,而不會因為經濟壓力而倉促做決定。 此外,網上創業需要的資源並不僅僅是時間和金錢,還有學習如何操作電子商務平台、建立品牌形象、掌握數碼行銷技巧等。這些都是需要時間去學習和實踐的,如果在失業後才匆忙上手,可能會導致決策失誤或錯失商機。而預先做好準備,你可以慢慢累積經驗,逐步調整自己的策略,讓創業過程更具可控性。 2. 資金與資源的準備時間 創業無論大小,都需要一定的資金投入,即使是網上創業也不例外。這些資金可能包括網站搭建、產品庫存、廣告推廣、工具訂閱等。失業後才開始創業,可能面臨資金不足的困境。而如果你在職時已經開始儲備創業資金,甚至能夠利用一部分收入投入創業,便能夠大幅減少財務壓力,讓你有更好的條件去經營業務。 同時,預先開始準備創業,還能幫助你找到適合的供應鏈合作夥伴、技術支援和行銷渠道。這些資源的建立需要時間和網絡,當你在穩定狀態下經營創業準備時,能夠更仔細地篩選和安排這些合作關係,確保日後正式開展業務時能夠順利進行。 3. 時間管理與創業學習的平衡 網上創業需要學習的技能眾多,例如電子商務平台的操作、數碼行銷、內容創作、SEO優化等。這些技能需要時間去熟練掌握。如果你是在失業後才開始學習這些,可能會面臨時間和壓力的雙重挑戰。然而,如果你在還有穩定收入的情況下,便能更有彈性地分配時間來學習這些技能。 例如,你可以利用下班時間參加網上創業課程,在週末開始嘗試小規模經營,從中學習如何與顧客溝通、處理物流等問題。這種漸進式的學習和實踐,能夠讓你在未來面對創業全職化時,有更好的基礎和信心。 4.…

    沒有網上快速致富的方法 – 不要落入“輕鬆賺錢”的陷阱!

    October 8, 2024

    為什麼要自己學懂在韓國直接以批發價入貨或直接從韓國時裝批發 agent 補貨?

    October 8, 2024
    Stay In Touch
    • Facebook
    • Instagram
    • YouTube
    • WhatsApp

    Follow Me!

    廣州十三行批發
    頁面
    • 關於我們
    • 聯絡我們
    • DMCA
    • Privacy Policy
    • Terms and Condition
    • Disclaimer
    精選推薦

    預先做好網上創業準備:為何比失業後再考慮更有利?

    October 21, 2024

    沒有網上快速致富的方法 – 不要落入“輕鬆賺錢”的陷阱!

    October 8, 2024

    為什麼要自己學懂在韓國直接以批發價入貨或直接從韓國時裝批發 agent 補貨?

    October 8, 2024

    訂閱最新賺錢貼士

    獲取網上營銷專家 Online Marketing Leader 最新 網上創業 | 小本創業 | 批發 | 代購 | 網上推廣 | SEO | Dropshipping | 賺錢 | 網店製作貼士!

    Type above and press Enter to search. Press Esc to cancel.