內容簡介
Sticky Header & Floating Bar Block 是一款強大的 WordPress 外掛，能讓使用者在頁面滾動時固定顯示標題或浮動條，提供更佳的使用體驗。它支援多種佈局，並可自訂樣式和行為，適合各種網站需求。
【主要功能】
• 預設樣式選擇，快速插入各種浮動元件
• 支援多個浮動區塊，獨立設定
• 可嵌套任何 Gutenberg 區塊，如導航、按鈕等
• 可選擇固定於頁面頂部或底部
• 僅在父容器內固定，靈活應用於不同佈局
外掛標籤
開發者團隊
② 後台搜尋「Sticky Header & Floating Bar Block by WPWing」→ 直接安裝（推薦）
原文外掛簡介
Try the Live Demo — test all four presets in WordPress Playground directly in your browser with zero setup.
Why not core position: sticky? Core’s sticky position only keeps a block pinned while its parent container is on screen, and it cannot hide, reveal, dismiss, or restyle a block as the visitor scrolls. This block uses position: fixed with scroll detection, so a header, cookie bar, or call-to-action stays in view in any layout – with an offset, a reveal trigger, sticky-state styles, and a dismiss button.
Sticky Header & Floating Bar Block is a container block that sticks to the top or bottom of the page once the visitor scrolls past it. Drop any blocks inside — a navigation menu, a call-to-action, a contact button, a sidebar widget — and they will follow the reader down the page.
Unlike CSS position: sticky, which only works within its parent scroll container, the block works reliably in any layout. And when confinement is exactly what you want – a sidebar that follows the reader but stops at the end of its section – switch the block to the “Within parent container” mode.
Key Features
Ready-made patterns — insert a Sticky Nav Bar, Cookie Notice Bar, Floating CTA, or Back to Top button pre-configured with sensible defaults, right from the block inserter.
Translations — the editor UI is available in Spanish, French, and German, with more locales welcome via translate.wordpress.org.
Multiple sticky blocks per page — place as many sticky blocks as you need, each with its own settings.
Container block — nest any Gutenberg blocks inside: navigation, buttons, headings, images, widgets.
Top or bottom sticky — choose whether the block locks to the top or bottom of the viewport. Cookie bars, chat widgets, and floating CTAs belong at the bottom.
Stick within parent container – a per-block mode that keeps the block sticky only while its parent container is in view, then lets it scroll away with it. The classic sticky-sidebar pattern, no code required.
Flexible reveal triggers – show the block immediately, after a pixel or percentage scroll threshold, or after a time delay. Pairs naturally with an entry transition for a smooth appear effect.
Dismissible — add a close button so visitors can dismiss the block, and optionally remember the dismissal for a set number of days. Perfect for cookie bars and floating CTAs.
Dismiss button styling – control the close button’s icon color, background color, and size so it matches your design.
Sticky style preview in the editor – a toolbar toggle applies your sticky-state styles to the block in the canvas, so you can design the stuck look without leaving the editor.
Top offset — set how many pixels of space to leave between the sticky block and the top of the viewport.
Admin toolbar aware — automatically shifts down for logged-in users who have the WordPress admin bar visible.
Z-index control — fine-tune stacking order so the sticky block always sits above (or below) other elements.
Scroll direction mode — choose “Always sticky” or “Only while scrolling up” (the pattern used by modern sticky headers that appear on the way back up).
Stop before an element — un-stick the block before it overlaps a footer or another landmark, using a CSS selector (e.g. #footer).
Disable on mobile — turn off sticky behaviour below a configurable viewport breakpoint (default 768 px).
Disable on desktop — turn off sticky behaviour above a configurable viewport breakpoint. Useful for elements that should only float on smaller screens.
Sticky-state background color — set a background color that only appears while the block is stuck, e.g. a solid white behind a transparent nav.
Sticky-state text color — change the text color when sticky, so a transparent header with light text can switch to dark text on a white background.
Sticky-state shadow — add a drop shadow (Small / Medium / Large) that appears only when the block is in sticky position.
Sticky-state padding (all sides) — control top, bottom, left, and right padding independently, applied only while the block is stuck.
Sticky-state border — add a Solid or Dashed border with custom width and color that appears only in the sticky state.
Sticky-state border radius – round the block’s corners only while it is stuck.
Sticky-state opacity – make the block semi-transparent while it is stuck, for a subtle see-through floating bar.
Sticky-state min/max width – set a minimum and/or maximum width the block should hold while stuck, so a nav bar or floating button doesn’t stretch or shrink to an awkward size.
Full width when sticky — instantly expand the block to span the full viewport width the moment it becomes sticky, ideal for navigation bars.
Entry & exit transition — animate the block smoothly in and out of the sticky state with Fade, Slide down, or Fade + Slide, with a configurable duration.
Custom class when sticky — add your own CSS classes to the block when it becomes sticky, for advanced theme integration.
State classes for developers – the block always carries an is-sticky or is-not-sticky class, so your theme CSS can target both states without any JavaScript.
Block transforms — convert any Group block into a Sticky Block (and back) directly in the editor, without rebuilding.
Accessibility — set an aria-label on the sticky wrapper to give screen reader users useful context.
Zero dependencies — no jQuery. The frontend script is plain JavaScript, under 4 KB minified.
How to use
In the block editor, search for Sticky Block and insert it anywhere on your page – or search for Sticky Nav Bar, Cookie Notice Bar, Floating CTA, or Back to Top to start from a ready-made preset.
Add blocks inside it — a Navigation block, a Button, a Group, anything you like.
Open the block settings panel on the right and adjust offset, z-index, scroll behaviour, and sticky-state styles.
Preview your page and scroll — the block will stick to the top (or bottom) of the viewport.
