{"id":30,"date":"2025-09-26T08:50:49","date_gmt":"2025-09-26T08:50:49","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/sticky\/"},"modified":"2025-09-27T08:32:11","modified_gmt":"2025-09-27T08:32:11","slug":"sticky","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/sticky\/","title":{"rendered":"Sticky"},"content":{"rendered":"\n

ska-theme includes an Alpine.js component for creating a sticky header.<\/p>\n\n\n\n

For creating a sticky header, add the x-data=\"skaSticky\"<\/code> attribute to the element that should stick. That element will receive the .is-sticky<\/code> class when it is sticky.<\/p>\n\n\n\n

Module arguments<\/span>TypeScript<\/span><\/header>
interface StickyConfig {\n\t\/** Offset from the top when the element should become sticky. *\/\n\toffset?: number\n\t\/** Selector for trigger element used to determine the offset. When used, the `offset` parameter can be used to fine-tune the value, for example `{trigger: '.ska-menu', offset: -5}` will trigger sticky 5px above the `.ska-menu` element. *\/\n\ttrigger?: string\n\t\/** Add `--sticky-min-h` and `--sticky-y` inline CSS variables that can be used to produce a smooth height change when the menu height is not the same while being sticky and not. *\/\n\tsmoothHeight?: boolean \/\/ Defaults to false\n\t\/** Watch for `x-trap.noscroll` adding `overflow:hidden;padding-right:npx` to document and apply the padding to sticky element as well to prevent layout shift. *\/\n\twatchNoScroll?: boolean \/\/ Defaults to true\n}<\/code><\/pre><\/div><\/div>\n\n\n\n
Arguments can be specified like this: x-data=\"skaSticky({offset: 128})\"<\/code>, x-data=\"skaSticky({trigger: '.ska-menu', offset: -10})\"<\/code><\/p>\n\n\n\n
When making a sticky header, it’s a good idea to give it a fixed height and wrap it in an element that has the same height. For example a wrapper element for a header with 4rem<\/code> height can use Tailwind classes [--header-height:var(spacing-16)] h-[--header-height] *:h-[--header-height]<\/code>. Now changing the --header-height<\/code> variable will change both the wrapper and the header height.<\/p>\n\n\n\n
The sticky header should have Tailwind classes for when the .is-sticky<\/code> class is added to the element, such as:<\/p>\n\n\n\n
\/** When using `[&.is-sticky]:` selector *\/\nfixed top-(--ska-wp-admin-bar-height) right-0 left-0 min-h-(--sticky-min-h)<\/code><\/pre><\/div><\/div>\n\n\n\n
\/** Without using a selector. *\/\n[&.is-sticky]:fixed [&.is-sticky]:top-(--ska-wp-admin-bar-height) [&.is-sticky]:right-0 [&.is-sticky]:left-0 [&.is-sticky]:min-h-(--sticky-min-h)<\/code><\/pre><\/div><\/div>\n\n\n\n
but appearance styles can be changed as well, such as:<\/p>\n\n\n\n
shadow-lg backdrop-blur-sm<\/code><\/pre><\/div><\/div>\n\n\n\n
To change any element deeper in the header based on the header’s “sticky” state, this variant can be used:<\/p>\n\n\n\n
[.is-sticky_&]<\/code><\/pre><\/div><\/div>\n\n\n\n
Sticky header example<\/h2>\n\n\n
\n
\n
\n
\n