skills.rest
r-senchuk
r-senchukCOMMUNITY
Explore all skills by this author →
GitHub

floating-sticky-ui

Implement and debug sticky headers, floating CTA bars, and z-index layering in Tailwind Next.js sites.

Updated Mar 29, 2026
Search Tags:#next.js#tailwind css#z-index#scroll trigger#sticky header#floating cta#ios safe-area
One-click install
npx skills add https://github.com/r-senchuk/agentskills --skill floating-sticky-ui-r-senchuk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: floating-sticky-ui
Source: https://github.com/r-senchuk/agentskills/tree/main/.agents/skills/floating-sticky-ui
Command: npx skills add https://github.com/r-senchuk/agentskills --skill floating-sticky-ui-r-senchuk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Fixed and sticky UI elements often break through z-index conflicts, mobile overlap issues, iOS safe-area gaps, and scroll-trigger bugs. This Skill provides a reserved z-index stack, copy-ready component patterns, and a checklist of constraints so sticky headers, mobile CTA bars, and floating widgets behave correctly across breakpoints. ## Core Features & Use Cases - Sticky Header Pattern: Uses sticky top-0 instead of fixed with an optional scroll-triggered shadow, avoiding body padding hacks. - Mobile Sticky CTA Bar: Slides in after 300px scroll, hides on md: breakpoints, and clears the iOS home indicator via env(safe-area-inset-bottom). - WhatsApp Widget Positioning: Resolves the common conflict where the floating button hides behind the mobile sticky bar using bottom-[76px] or a CSS custom property. - Use Case: A user reports the WhatsApp button is hidden behind the mobile sticky bar on their Next.js site. The Skill identifies the z-index and bottom-offset conflict and applies the documented fix with correct breakpoint rules. ## Quick Start Ask the agent to fix the z-index conflict between the WhatsApp widget and the mobile sticky bar on your Tailwind Next.js site.

Frequently Asked Questions about floating-sticky-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a sticky header in Tailwind CSS with Next.js?▼

Use `sticky top-0 z-50` on the header element instead of `position: fixed`, which avoids adding body padding-top. Add a scroll listener with `{ passive: true }` to toggle a shadow class once `window.scrollY` exceeds a small threshold.

How to fix a floating button hidden behind a mobile sticky bar?▼

Raise the floating button's bottom offset above the sticky bar height, for example `bottom-[76px]` on mobile and `md:bottom-6` on desktop. Alternatively define a `--sticky-bar-height` CSS custom property and compute the offset with `calc()`.

Why is position sticky not working in Safari?▼

Sticky positioning fails when any ancestor element has `overflow: hidden`. Remove `overflow-hidden` from layout ancestors of the sticky element so the browser can establish the correct containing block.

Does this work with Tailwind CSS v4 and Next.js static export?▼

Yes, the patterns target Tailwind CSS v4, Next.js 15+, and React 18+ for statically exported sites. All scroll hooks are client components using `'use client'` with passive listeners and cleanup functions.

When should I not use sticky or fixed positioning patterns?▼

Do not use these patterns for static section layouts, grid system design, typography changes, or non-fixed component styling. They apply only to elements that stick, float, or overlay page content.

Related Skills

Explore More Software Engineering Skills→
Jicate-SolutionsJicate-Solutions

mobile-responsive

Convert web pages to mobile-responsive layouts in Next.js/React with Tailwind CSS.

Official
Intermediate
tomtoto757tomtoto757
3

responsive-storefront

Implement mobile-first responsive storefront layouts with sticky buy bars and touch-optimized cart drawers.

Community
Intermediate
blueif16blueif16
103

piflow-web-design

Enforce color tokens and typography for PiFlow marketing site design consistency.

Community
Intermediate
joaoguirunasjoaoguirunas
3

sites-ux-interaction

Implements UX interaction patterns for Next.js websites including sticky headers, mobile navigation, and Motion animations.

Community
Intermediate