[WordPress] 外掛分享： Sticky Menu & Sticky Header

WordPress 外掛 Sticky Menu & Sticky Header 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Sticky Menu & Sticky Header」是 2014-09-18 上架。
  • 目前有 100000 個安裝啟用數。
  • 上一次更新是 2025-04-16，距離現在已有 16 天。
  • 外掛最低要求 WordPress 3.6 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 5.2 以上。
  • 有 737 人給過評分。
  • 論壇上目前有 1 個提問，問題解答率 100% ，不低，算是個很有心解決問題的開發者團隊了！

外掛協作開發者

webfactory |

外掛標籤

sticky | sticky menu | floating menu | sticky header | sticky widget |

內容簡介

這款 WP Sticky Menu (或 Sticky Header) On Scroll 外掛能讓你在往下滾動並滑動到頂部時，讓任何頁面上的元素保持固定位置。通常會用於讓導覽列固定在頁面上方以創造漂浮式選單，但此外掛讓你能讓其他元素也保持固定位置，例如讓標題固定、漂浮式小工具（fixed widget）、浮動式圖像、漂浮式呼籲或漂浮式選單等等。

你只需要知道如何選擇該元素的正確選擇器，應選擇一個唯一的選擇器。有時候像是 nav、#main-menu 或 .menu-main-menu-1 這樣的簡單選擇器就足夠。其他時候，你可能需要使用更詳細和更具體的選擇器，例如 header > ul:first-child 或 nav.top .menu-header ul.main。如果你不想搞任何代碼，可以查看 WP Sticky PRO 中的視覺元素選擇器。

功能

任何元素都可以固定：雖然常見的用途是導覽列或標題，但此外掛也讓你能選擇任何具有名稱、類別或 ID 的唯一元素並固定在頁面頂部，當滾動到該位置以後。使用此功能可產生漂浮式小工具、漂浮式側邊欄、漂浮式標題、漂浮式導覽列、漂浮式呼籲框或漂浮式橫幅廣告等。需要讓多個元素固定？請查看 WP Sticky PRO 外掛。
從頂部定位：選擇性地，你可以在固定的元素與頁面頂部之間添加任意間距，這樣該元素就不會始終固定在頁面“天花板”上。
僅啟用特定屏幕大小：選擇性地，你可以設置最小和/或最大屏幕大小，其中黏性應該生效。這在你有一個響應式網站並且你不想讓元素在較小的屏幕上固定時就很方便。
僅在某些頁面上啟用：有時候你不想讓元素在整個網站上都是粘性的。WP Sticky PRO 外掛同時提供了選擇文章、頁面、類別、標簽和CPT，這時你就可以選擇不希望元素固定的頁面。
將元素推上來：選擇性地，你可以選擇頁面上的其他更低元素，該元素將再次將黏性元素推上去（例如，側邊欄小工具）。
管理員工具欄感知：檢查當前用戶是否有位於頁面頂部的管理員工具欄。如果有，該黏性元素將不會遮擋它（或被遮擋）。
Z軸索引：如果頁面上有其他元素遮擋或窺視你的粘性元素，你可以輕鬆地添加Z軸索引。
遺產模式：在2.0版中引入了一種新的製作固定元素的方法。在遺留模式下，將使用舊的方法。有關詳細信息，請參閱問與答 (FAQ)。
動態模式：添加了動態模式 (僅遺跡模式) 來解決經常出現在響應式主題中的一些問題。有關詳細信息，請參閱問與答 (FAQ)。
調試模式：切換開啟調試模式，查找可能導致元素不適用的原因，錯誤消息將出現在你的瀏覽器控制台中。

遇到SSL問題嗎？將網站從HTTP轉換為HTTPS？可以安裝我們的免費 WP Force SSL 外掛。這是解決所有SSL問題的好方法。

符合 GDPR

我們不是律師。請不要把任何以下觀點視為法律建議。
粘滯沒有在前端或後端跟踪、收集或處理任何用戶數據。沒有任何東西被記錄或推送到任何第三方。我們也不使用任何第三方服務或CDN。

原文外掛簡介

The WP Sticky Menu (or Sticky Header) On Scroll plugin allows you to make any element on your pages “sticky” as soon as it hits the top of the page when you scroll down. Although this is commonly used to keep menus at the top of your page to create floating menus, the plugin allows you to make any element sticky. Make a sticky header, stick menu, sticky widget (fixed widget), sticky logo, sticky call to action or a floating menu.
You just need to know how to pick the right selector for the element you want to make sticky, and you need to be sure it’s a unique selector. Sometimes a simple selector like “nav”, “#main-menu”, “.menu-main-menu-1” is enough. Other times you will have to be more detailed and use a more specific selector such as “header > ul:first-child” or “nav.top .menu-header ul.main”. If you don’t like messing with any code check out out the visual element picker in WP Sticky PRO.
Features

Any element can stick: although common use is for navigation menus, or header the plugin will let you pick any unique element with a name, class or ID to stick at the top of the page once you scroll past it. Use it for sticky widget, sticky sidebar, sticky header, sticky menu, sticky header, sticky call-to-action box, sticky banner ad, etc. Need to make multiple elements sticky? Check out WP Sticky PRO.
Positioning from top: optionally, you can add any amount of space between the sticky element and the top of the page, so that the element is not always stuck at the “ceiling” of the page.
Enable for certain screen sizes only: optionally, you can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don’t want your element to be sticky on smaller screens, for example.
Enable only on some pages: sometimes you don’t want the element to be sticky on the entire site. WP Sticky PRO gives you the option to pick posts, pages, categories, tags and CPTs where you don’t want the element to be sticky.
Push-up element: optionally, you can pick any other element lower on the page that will push the sticky element up again (for example a sidebar widget).
Admin Bar aware: checks if the current user has an Admin Toolbar at the top of the page. If it has, the sticky element will not obscure it (or be obscured by it).
Z-index: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
Legacy Mode: in 2.0, a new method of making things sticky was introduced. In Legacy Mode, the old method will be used. See FAQ for details.
Dynamic Mode: some issues that frequently appear in responsive themes have been address by adding a Dynamic Mode (Legacy Mode only). See FAQ for details.
Debug Mode: find out possible reasons why your element doesn’t stick by switching on Debug Mode, and error messages will appear in your browser’s console.

Having problems with SSL? Moving a site from HTTP to HTTPS? Install our free WP Force SSL plugin. It’s a great way to fix all SSL problems.
GDPR compatibility
We are not lawyers. Please do not take any of the following as legal advice.
Sticky does not track, collect or process any user data on the front end or in the admin. Nothing is logged or pushed to any 3rd parties. We also don’t use any 3rd party services or CDNs. Based on that, we feel it’s GDPR compatible, but again, please, don’t take this as legal advice.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Sticky Menu & Sticky Header」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0 | 1.1 | 1.2 | 1.3 | 2.0 | 2.1 | 2.2 | 2.21 | 2.22 | 2.23 | 2.25 | 2.28 | 2.29 | 2.30 | 2.31 | 2.32 | 2.33 | 1.1.1 | 1.1.2 | 1.1.3 | 1.1.4 | 1.2.1 | 1.3.1 | 2.0.1 | 2.1.1 | trunk |

延伸相關外掛（你可能也想知道）

  • Floating Notification Bar, Sticky Menu on Scroll, Announcement Banner, and Sticky Header for Any Theme – My Sticky Bar (formerly myStickymenu) 》使用 myStickymenu 為您的網站創建一個美麗的通知欄。此外，此粘性菜單外掛還可以在滾動到一定像素點後讓您的菜單或標頭保持粘性。您也可以使用它來創建歡迎...。
  • Float menu – awesome floating side menu 》Float Menu 是一個免費的 WordPress 外掛程式，可以建立和定位網站上獨特的浮動式選單。這個擴充功能允許使用者不論在資源上面的位置獲取面板的功能，選單隨...。
  • WP Mobile Bottom Menu 》WP Mobile Bottom Menu is a WordPress plugin that creates a bottom navigation menu for mobile users, enhancing user engagement and boosting conversi...。
  • Sticky Buttons – Floating Buttons Builder 》4>Sticky Buttons Pro是一個WordPress外掛，讓您可以快速創建資訊浮動按鈕，這些按鈕將始終在使用者的視線範圍內，增加使用者的注意力並快速訪問所需的網站頁...。
  • Side Menu Lite – Sticky Floating Side Menu 》Side Menu Lite 是一個免費的外掛，可以在您的網站上創建方便的側邊欄。它允許您在頁面的左側或右側添加固定的滑出按鈕。插入任何鏈接，並在網站上創建獨特的...。
  • Boostify Header Footer Builder for Elementor 》, 使用 Elementor Page Builder 免費創建您網站的頁眉和頁腳。, , Boostify Header Footer Builder for Elementor 是一個強大的外掛，允許您創建：, – ...。
  • Fixed And Sticky Header 》這個 WordPress 套件可以固定標題或選單，讓它們在網頁上一直可見。, 這是一個非常好用的功能，讓使用者瀏覽網頁更快速。, 在設定選項裡（Fixed header），您...。
  • Catch Sticky Menu 》Catch Sticky Menu 是一個輕量、簡單且功能豐富的免費 WordPress 外掛，可讓您鎖定網站上的選單。即使對於初學者，本外掛也非常易於使用。Catch Sticky Menu ...。
  • Sticky Header by ThematoSoup 》如需支援，請使用我們的專屬支援論壇。, 「Sticky Header WordPress」外掛可讓您的標題條件時顯示，這是一個非常棒的功能，可讓使用者更快速瀏覽網頁並消費更...。
  • WP Sticky Anything – Sticky Menu & Sticky Header, Sticky Sidebar 》All-in-One WP Sticky Anything, All-in-One WP Sticky Anything on Scroll 插件可讓您在網站上使任何元素固定。它也適用於 Elementor 頁面建構器。, 有時我...。
  • Floating Side Tab 》總結：「Floating Side Tab」是一個免費的 WordPress 浮動側邊欄外掛程式，設計用來在網站的左側或右側添加浮動的快速連結。這個外掛程式具有超過 5 個預設的...。
  • Sticky Content – Stick any content on pages 》這個外掛可以讓您把頁面上的任何元素變成「黏滯」，當您往下滾動頁面時，一旦該元素到達頁面頂部，就會固定在那裡。, 範例展示, 功能, , 完全定制化：您需要...。
  • Awesome Sticky Header by DevCanyon 》如需支援請使用我們的專屬支援論壇。, 完全掌控您的粘性標頭。 設置您的菜單，子菜單，次級菜單，搜索，您的顏色，背景或透明度，您的徽標等等！, 在插件的管...。
  • WP Sticky Menu 》使用此外掛程式在 WordPress 網站中顯示固定選單。這不僅僅是一個正常的固定選單出現在頁首，當你向下滾動時，它會淡出，但當你向上滾動時，它會再次出現在頁...。
  • Fixed Menu Anchor 》如果你的 WordPress 主題中使用了固定導覽選單，這個外掛是最好的解決方式，可以處理導覽選單重疊到錨定內容的問題。插入精確的導覽選單高度以在錨點前跳轉到...。

文章
Filter
Mastodon