{"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-05-23T05:06:53","modified_gmt":"2026-05-23T05:06:53","slug":"wpwing-sticky-block","status":"publish","type":"plugin","link":"https:\/\/id.wordpress.org\/plugins\/wpwing-sticky-block\/","author":18668647,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.0.0","stable_tag":"2.0.0","tested":"7.0","requires":"5.8","requires_php":"7.4","requires_plugins":null,"header_name":"WPWing Sticky Block","header_author":"WPWing","header_description":"Example static block scaffolded with Create Block tool.","assets_banners_color":"b7bec1","last_updated":"2026-05-23 05:06:53","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":866,"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"}},"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.0.0","title":"WPWing Sticky Block","category":"design","keywords":["Sticky","Sticky Block","WPWing"],"icon":"sticky","description":"A sticky container block. Drop any blocks inside and they will follow the reader as they scroll \u2014 with controls for offset, z-index, scroll direction, mobile breakpoint, and sticky-state styles.","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}},"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"],"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":"WPWing Sticky Block 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":"WPWing Sticky Block 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

WPWing Sticky Block<\/strong> is a Gutenberg container block that sticks to the top 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), WPWing Sticky Block 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 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
  • 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 shadow<\/strong> \u2014 add a drop shadow (Small \/ Medium \/ Large) that appears only when the block is in sticky position.<\/li>\n
  • Sticky-state top padding<\/strong> \u2014 add extra breathing room above the content when the block is stuck.<\/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 2 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.<\/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 WPWing Sticky Block<\/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 v2.0.0 fully supports multiple sticky blocks on the same page. Each block has its own independent settings and scroll listener.<\/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?<\/h3><\/dt>\n

          Yes. Open the Responsive<\/strong> panel in the block settings and enable \"Disable sticky on mobile\". You can also adjust the breakpoint (default: 768 px).<\/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.0.0<\/h4>\n\n
            \n
          • New: multiple sticky blocks supported per page (removed the single-block limitation).<\/li>\n
          • New: \"Only while scrolling up\" scroll direction mode.<\/li>\n
          • New: Stop-before-element setting \u2014 un-stick before a chosen element (e.g. footer).<\/li>\n
          • New: Disable-on-mobile toggle with configurable breakpoint.<\/li>\n
          • New: Sticky-state background color (shown only when the block is stuck).<\/li>\n
          • New: Sticky-state shadow presets (Small \/ Medium \/ Large).<\/li>\n
          • New: Sticky-state top-padding control.<\/li>\n
          • New: ARIA label control for accessibility.<\/li>\n
          • Improvement: Rewrote frontend script in vanilla JavaScript \u2014 no jQuery dependency.<\/li>\n
          • Improvement: Scroll handler uses requestAnimationFrame for smooth, jank-free performance.<\/li>\n
          • Improvement: Upgraded to Gutenberg Block API v3.<\/li>\n
          • Improvement: Frontend script registered via block.json viewScript \u2014 loads only on pages that contain the block.<\/li>\n
          • Fix: Editor border style now correctly targets the block wrapper class.<\/li>\n
          • Fix: adminBarHeight variable scope (was implicit global).<\/li>\n
          • Fix: stopBefore check now evaluated before sticky is applied, preventing a one-frame flicker.<\/li>\n
          • Fix: Trigger position (divTop) and block width recalculated on viewport resize to handle layout reflows.<\/li>\n
          • Fix: Minimum WordPress version corrected to 5.8 (was incorrectly listed as 4.8 in readme).<\/li>\n
          • Tested up to WordPress 7.0.<\/li>\n<\/ul>\n\n

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

              1.0.0<\/h4>\n\n
                \n
              • 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:\/\/id.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/159284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/id.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/id.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/id.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=159284"}],"author":[{"embeddable":true,"href":"https:\/\/id.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/wpwing"}],"wp:attachment":[{"href":"https:\/\/id.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=159284"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/id.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=159284"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/id.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=159284"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/id.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=159284"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/id.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=159284"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/id.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=159284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}