{"id":159284,"date":"2022-06-30T21:08:57","date_gmt":"2022-06-30T21:08:57","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/wpwing-sticky-block\/"},"modified":"2026-06-14T03:18:27","modified_gmt":"2026-06-14T03:18:27","slug":"wpwing-sticky-block","status":"publish","type":"plugin","link":"https:\/\/kea.wordpress.org\/plugins\/wpwing-sticky-block\/","author":18668647,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.3.0","stable_tag":"2.3.0","tested":"7.0","requires":"5.8","requires_php":"7.4","requires_plugins":null,"header_name":"Sticky Block for Gutenberg","header_author":"WPWing","header_description":"Example static block scaffolded with Create Block tool.","assets_banners_color":"b7bec1","last_updated":"2026-06-14 03:18:27","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/wpwing.com\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":1024,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.1":{"tag":"1.0.1","author":"wpwing","date":"2022-07-05 20:18:12"},"2.0.0":{"tag":"2.0.0","author":"wpwing","date":"2026-05-23 05:06:53"},"2.1.0":{"tag":"2.1.0","author":"wpwing","date":"2026-05-30 07:26:07"},"2.2.0":{"tag":"2.2.0","author":"wpwing","date":"2026-06-07 03:11:57"},"2.3.0":{"tag":"2.3.0","author":"wpwing","date":"2026-06-14 03:18:27"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3544729,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3544729,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3544729,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3544729,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":{"wpwing\/sticky-block":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"wpwing\/sticky-block","version":"2.3.0","title":"Sticky Block for Gutenberg","category":"design","keywords":["Sticky","Sticky Block","WPWing"],"icon":"sticky","description":"A container block that sticks to the top of the viewport as visitors scroll \u2014 with entry\/exit transitions, sticky-state styles, full-width mode, and more.","attributes":{"topSpace":{"type":"integer","default":0},"checkForAdmin":{"type":"boolean","default":true},"zIndex":{"type":"integer","default":1},"scrollDirection":{"type":"string","default":"always"},"stopBefore":{"type":"string","default":""},"disableOnMobile":{"type":"boolean","default":false},"mobileBreakpoint":{"type":"integer","default":768},"ariaLabel":{"type":"string","default":""},"stickyBackground":{"type":"string","default":""},"stickyShadow":{"type":"string","default":"none"},"stickyPaddingTop":{"type":"integer","default":0},"stickyTextColor":{"type":"string","default":""},"fullWidthWhenSticky":{"type":"boolean","default":false},"stickyTransition":{"type":"string","default":"none"},"stickyTransitionDuration":{"type":"integer","default":300},"stickyPaddingBottom":{"type":"integer","default":0},"stickyPaddingLeft":{"type":"integer","default":0},"stickyPaddingRight":{"type":"integer","default":0},"stickyBorderStyle":{"type":"string","default":"none"},"stickyBorderWidth":{"type":"integer","default":1},"stickyBorderColor":{"type":"string","default":""},"stickyExtraClass":{"type":"string","default":""},"hideBeforeSticky":{"type":"boolean","default":false},"stickyPosition":{"type":"string","default":"top"},"bottomSpace":{"type":"integer","default":0},"disableOnDesktop":{"type":"boolean","default":false},"desktopBreakpoint":{"type":"integer","default":1024}},"supports":{"html":false},"textdomain":"wpwing-sticky-block","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css","viewScript":"file:.\/frontend.js"}},"tagged_versions":["1.0.1","2.0.0","2.1.0","2.2.0","2.3.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":2750486,"resolution":"1","location":"assets","locale":"","width":345,"height":371},"screenshot-2.png":{"filename":"screenshot-2.png","revision":2750486,"resolution":"2","location":"assets","locale":"","width":981,"height":289},"screenshot-3.png":{"filename":"screenshot-3.png","revision":2750486,"resolution":"3","location":"assets","locale":"","width":276,"height":550},"screenshot-4.png":{"filename":"screenshot-4.png","revision":2750486,"resolution":"4","location":"assets","locale":"","width":528,"height":257}},"screenshots":{"1":"Sticky Block for Gutenberg in the block inserter.","2":"A sticky block with inner content shown in the editor.","3":"The block settings sidebar \u2014 Sticky Options, Behavior, Responsive, Accessibility, and Sticky State Styles panels.","4":"The block in action on the frontend in sticky (fixed) position."}},"plugin_section":[],"plugin_tags":[148857,3960,148076,4007,181326],"plugin_category":[],"plugin_contributors":[187152,204217],"plugin_business_model":[],"class_list":["post-159284","plugin","type-plugin","status-publish","hentry","plugin_tags-block-editor","plugin_tags-fixed","plugin_tags-gutenberg","plugin_tags-sticky","plugin_tags-sticky-block","plugin_contributors-voboghure","plugin_contributors-wpwing","plugin_committers-wpwing"],"banners":{"banner":"https:\/\/ps.w.org\/wpwing-sticky-block\/assets\/banner-772x250.png?rev=3544729","banner_2x":"https:\/\/ps.w.org\/wpwing-sticky-block\/assets\/banner-1544x500.png?rev=3544729","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/wpwing-sticky-block\/assets\/icon-128x128.png?rev=3544729","icon_2x":"https:\/\/ps.w.org\/wpwing-sticky-block\/assets\/icon-256x256.png?rev=3544729","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/wpwing-sticky-block\/assets\/screenshot-1.png?rev=2750486","caption":"Sticky Block for Gutenberg in the block inserter."},{"src":"https:\/\/ps.w.org\/wpwing-sticky-block\/assets\/screenshot-2.png?rev=2750486","caption":"A sticky block with inner content shown in the editor."},{"src":"https:\/\/ps.w.org\/wpwing-sticky-block\/assets\/screenshot-3.png?rev=2750486","caption":"The block settings sidebar \u2014 Sticky Options, Behavior, Responsive, Accessibility, and Sticky State Styles panels."},{"src":"https:\/\/ps.w.org\/wpwing-sticky-block\/assets\/screenshot-4.png?rev=2750486","caption":"The block in action on the frontend in sticky (fixed) position."}],"raw_content":"\n

Sticky Block for Gutenberg<\/strong> is a container block that sticks to the top or bottom of the page once the visitor scrolls past it. Drop any blocks inside \u2014 a navigation menu, a call-to-action, a contact button, a sidebar widget \u2014 and they will follow the reader down the page.<\/p>\n\n

Unlike CSS position: sticky<\/code> (which only works within its parent scroll container), Sticky Block for Gutenberg uses position: fixed<\/code> with intelligent scroll detection, so it works reliably in any layout.<\/p>\n\n

Key Features<\/h4>\n\n
    \n
  • Multiple sticky blocks per page<\/strong> \u2014 place as many sticky blocks as you need, each with its own settings.<\/li>\n
  • Container block<\/strong> \u2014 nest any Gutenberg blocks inside: navigation, buttons, headings, images, widgets.<\/li>\n
  • Top or bottom sticky<\/strong> \u2014 choose whether the block locks to the top or bottom of the viewport. Cookie bars, chat widgets, and floating CTAs belong at the bottom.<\/li>\n
  • Show only after scrolling<\/strong> \u2014 hide the block entirely at page load and reveal it only after the visitor scrolls past the trigger point. Pairs naturally with an entry transition for a smooth appear effect.<\/li>\n
  • Top offset<\/strong> \u2014 set how many pixels of space to leave between the sticky block and the top of the viewport.<\/li>\n
  • Admin toolbar aware<\/strong> \u2014 automatically shifts down for logged-in users who have the WordPress admin bar visible.<\/li>\n
  • Z-index control<\/strong> \u2014 fine-tune stacking order so the sticky block always sits above (or below) other elements.<\/li>\n
  • Scroll direction mode<\/strong> \u2014 choose \"Always sticky\" or \"Only while scrolling up\" (the pattern used by modern sticky headers that appear on the way back up).<\/li>\n
  • Stop before an element<\/strong> \u2014 un-stick the block before it overlaps a footer or another landmark, using a CSS selector (e.g. #footer<\/code>).<\/li>\n
  • Disable on mobile<\/strong> \u2014 turn off sticky behaviour below a configurable viewport breakpoint (default 768 px).<\/li>\n
  • Disable on desktop<\/strong> \u2014 turn off sticky behaviour above a configurable viewport breakpoint. Useful for elements that should only float on smaller screens.<\/li>\n
  • Sticky-state background color<\/strong> \u2014 set a background color that only appears while the block is stuck, e.g. a solid white behind a transparent nav.<\/li>\n
  • Sticky-state text color<\/strong> \u2014 change the text color when sticky, so a transparent header with light text can switch to dark text on a white background.<\/li>\n
  • Sticky-state shadow<\/strong> \u2014 add a drop shadow (Small \/ Medium \/ Large) that appears only when the block is in sticky position.<\/li>\n
  • Sticky-state padding (all sides)<\/strong> \u2014 control top, bottom, left, and right padding independently, applied only while the block is stuck.<\/li>\n
  • Sticky-state border<\/strong> \u2014 add a Solid or Dashed border with custom width and color that appears only in the sticky state.<\/li>\n
  • Full width when sticky<\/strong> \u2014 instantly expand the block to span the full viewport width the moment it becomes sticky, ideal for navigation bars.<\/li>\n
  • Entry & exit transition<\/strong> \u2014 animate the block smoothly in and out of the sticky state with Fade, Slide down, or Fade + Slide, with a configurable duration.<\/li>\n
  • Custom class when sticky<\/strong> \u2014 add your own CSS classes to the block when it becomes sticky, for advanced theme integration.<\/li>\n
  • Block transforms<\/strong> \u2014 convert any Group block into a Sticky Block (and back) directly in the editor, without rebuilding.<\/li>\n
  • Accessibility<\/strong> \u2014 set an aria-label<\/code> on the sticky wrapper to give screen reader users useful context.<\/li>\n
  • Zero dependencies<\/strong> \u2014 no jQuery. The frontend script is plain JavaScript, under 4 KB minified.<\/li>\n<\/ul>\n\n

    How to use<\/h4>\n\n
      \n
    1. In the block editor, search for Sticky Block<\/strong> and insert it anywhere on your page.<\/li>\n
    2. Add blocks inside it \u2014 a Navigation block, a Button, a Group, anything you like.<\/li>\n
    3. Open the block settings panel on the right and adjust offset, z-index, scroll behaviour, and sticky-state styles.<\/li>\n
    4. Preview your page and scroll \u2014 the block will stick to the top (or bottom) of the viewport.<\/li>\n<\/ol>\n\n\n

      Automatic installation<\/h4>\n\n
        \n
      1. Go to Plugins \u2192 Add New<\/strong> in your WordPress admin.<\/li>\n
      2. Search for Sticky Block for Gutenberg<\/strong>.<\/li>\n
      3. Click Install Now<\/strong>, then Activate<\/strong>.<\/li>\n<\/ol>\n\n

        Manual installation<\/h4>\n\n
          \n
        1. Download the plugin ZIP from WordPress.org.<\/li>\n
        2. Go to Plugins \u2192 Add New \u2192 Upload Plugin<\/strong>.<\/li>\n
        3. Upload the ZIP and activate.<\/li>\n<\/ol>\n\n\n
          \n

          Can I add more than one sticky block on a page?<\/h3><\/dt>\n

          Yes \u2014 you can place as many sticky blocks as you need on the same page. Each one has its own independent settings.<\/p><\/dd>\n

          Does it work with the full-site editor (FSE)?<\/h3><\/dt>\n

          Yes. The block works in both the classic page\/post editor and the full-site editor (Site Editor) in WordPress 5.9+.<\/p><\/dd>\n

          Why does my sticky block not work inside a column or group?<\/h3><\/dt>\n

          If a parent element has overflow: hidden<\/code> or overflow: clip<\/code> set, position: fixed<\/code> will be clipped to that container and may not behave as expected. Remove the overflow restriction on the parent, or move the sticky block outside the constrained container.<\/p><\/dd>\n

          Can I disable sticky behaviour on phones or only show it on mobile?<\/h3><\/dt>\n

          Yes. Open the Responsive<\/strong> panel in the block settings. Enable \"Disable sticky on mobile\" to turn off sticky below a breakpoint (default: 768 px). Enable \"Disable sticky on desktop\" to turn it off above a breakpoint (default: 1024 px) \u2014 useful for elements that should only float on smaller screens.<\/p><\/dd>\n

          How do I make the block stop before the footer?<\/h3><\/dt>\n

          Open the Behavior<\/strong> panel and enter a CSS selector in the \"Stop before element\" field \u2014 for example #footer<\/code> or .site-footer<\/code>. The block will un-stick before its bottom reaches that element.<\/p><\/dd>\n

          Will it conflict with my theme's sticky header?<\/h3><\/dt>\n

          It should not conflict, but if both your theme and the plugin apply position: fixed<\/code> to overlapping elements, adjust the Z-index<\/strong> setting in the block sidebar to control which element sits on top.<\/p><\/dd>\n\n<\/dl>\n\n\n

          2.3.0 - 14\/06\/2026<\/h4>\n\n
            \n
          • New: Your sticky block can now lock to the bottom of the viewport instead of the top. Cookie consent bars, floating chat widgets, and mobile call-to-action strips all belong at the bottom \u2014 now you can build them without any custom code.<\/li>\n
          • New: A new \"Show only after scrolling\" toggle hides the block entirely at page load and reveals it only after the user has scrolled past it. Pair it with an entry transition for a smooth appear effect \u2014 ideal for back-to-top buttons and floating CTAs.<\/li>\n
          • New: You can now disable sticky behaviour on desktop \u2014 the counterpart to the existing mobile disable. Handy for elements that only make sense as floating buttons on small screens.<\/li>\n
          • Fix: Sticky was being disabled at exactly the mobile breakpoint width instead of below it, causing a one-pixel gap where the setting had no effect. The breakpoint now behaves consistently with its label.<\/li>\n
          • Fix: Resizing the window during the exit animation could corrupt the scroll trigger point, causing the block to snap straight back into sticky position. The trigger is now only recalculated once the block has fully returned to its natural position.<\/li>\n
          • Fix: The transition control in the editor was still labelled \"Entry transition\" even though it has driven both entry and exit animations since version 2.2.0.<\/li>\n<\/ul>\n\n

            2.2.0 - 07\/06\/2026<\/h4>\n\n
              \n
            • New: Your sticky bar now animates out the same way it came in. If you chose a Fade or Slide entry, the exit now matches \u2014 no more jarring snap when the block leaves the sticky position.<\/li>\n
            • New: You can now control the spacing on all four sides of your sticky block, not just the top. Handy when your sticky nav feels cramped once it locks to the screen.<\/li>\n
            • New: Add a border that only appears when your block is stuck \u2014 a clean way to draw a visual line between a sticky header and the content scrolling beneath it. Choose Solid or Dashed, set a thickness and a color.<\/li>\n
            • New: Enter a CSS class name and it gets added automatically when the block sticks, then removed when it scrolls back to its normal position. Useful for applying custom styles from your theme.<\/li>\n
            • New: You can now switch any existing Group block into a Sticky Block \u2014 and back \u2014 with a single click in the editor. All the content inside is kept exactly as it was.<\/li>\n<\/ul>\n\n

              2.1.0<\/h4>\n\n
                \n
              • New: Your sticky block can now glide into view instead of snapping into place. Choose Fade, Slide down, or both together \u2014 and set how fast the animation plays.<\/li>\n
              • New: One toggle makes your sticky block stretch edge to edge the moment it becomes sticky. Great for navigation bars that need to span the full width of the screen.<\/li>\n
              • New: Set a different text color for when the block is sticky. Pair it with a sticky background color to build the popular transparent-to-solid header effect.<\/li>\n<\/ul>\n\n

                2.0.0<\/h4>\n\n
                  \n
                • New: Place more than one sticky block on the same page \u2014 each with its own independent settings.<\/li>\n
                • New: Choose whether your block stays sticky all the time, or only reappears when the visitor scrolls back up.<\/li>\n
                • New: Tell the block to stop sticking before it reaches your footer, so it never overlaps the bottom of your page.<\/li>\n
                • New: Turn off sticky behavior on phones with a single toggle, and choose exactly which screen width counts as mobile.<\/li>\n
                • New: Set a background color that only shows when the block is stuck \u2014 ideal for a transparent header that needs a solid fill once it leaves the top of the page.<\/li>\n
                • New: Add a shadow under the block when it is sticky \u2014 a subtle touch that helps it stand out from the content below.<\/li>\n
                • New: Add extra padding above your content when the block is stuck.<\/li>\n
                • New: Give the sticky wrapper a label that screen readers can announce, so visitors using assistive technology know what it is.<\/li>\n
                • Improvement: The plugin no longer requires jQuery \u2014 it now loads a small, fast script only on pages where you have placed a sticky block.<\/li>\n
                • Improvement: Scrolling feels smoother and more responsive than before.<\/li>\n
                • Fix: The block no longer briefly flickers into the wrong position when scrolling near the footer stop point.<\/li>\n
                • Fix: The sticky position is now correctly recalculated when the page layout changes \u2014 for example after an image loads or the browser window is resized.<\/li>\n<\/ul>\n\n

                  1.0.1<\/h4>\n\n
                    \n
                  • Fix: Minor fixes.<\/li>\n<\/ul>\n\n

                    1.0.0<\/h4>\n\n
                      \n
                    • New: Initial release.<\/li>\n<\/ul>","raw_excerpt":"Make any block sticky. A lightweight Gutenberg container block that fixes its content to the top of the viewport as visitors scroll \u2014 no coding requir …","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/159284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=159284"}],"author":[{"embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/wpwing"}],"wp:attachment":[{"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=159284"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=159284"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=159284"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=159284"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=159284"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/kea.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=159284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}