Dancepad

Getting started
Introduction Installation
Texts
Arc Title Blade Reveal Blended Hover Blur Reading Blur Reveal Counter Decode Hover Decode Reveal Fluid Gradient Highlight Hover Letter Launcher Looping Lines Mousefill Title Random Letters Scroll Reading Swap Hover Text Shimmer Twist Reveal Typed Underline Hover Unfold Hover Unfold Reveal 3D Swap Hover
Buttons
Anyside Button Arrow Button Arrow Button v2 Arrow Button v3 Arrow Icon Crystal Button Glowing Button Layer Button Marquee Button Marquee Button v2 Mask Button Modal Button Prism Button Ripple Button Ripple Button v2 Ripple Button v3 Shiny Button
Menus
Burger Circular Menu Dock Drawer Dropdown Dropdown megaMenu Dynamic Island Expanding Menu Focus Nav Gooey Nav Morphing Nav Multi Offcanvas Menu Offcanvas Menu Overlay Menu Sticky Header
Medias
Before/After Image Image Hotspots Image Reveal Parallax
Cursors
Cursor Cursor Slide Designer Cursor
Sliders
Infinite Slider Parallax Slider
Backgrounds
Border Beam Fluids Gradiently Grainy Particles Physics Spotlight Spotlight v2 Tiles
Cores
Accordion Back to Top Click and Copy Flipbox Glitchy Glowing Card Horizontal Marquee Interactive Divider Inverted Corner Mask Hover Motion Divider Observer Parallax Hover Progress Bar QR Code Scrollbar Smooth Scroll Stacking Cards Tabs Tippy Pixels Shimmer Card Vertical Marquee
Jose Tamu
January 24, 2025 /
Beginner

Sticky Header

Demo

How it works

Sticky Header is a nestable block element that contains a Burger, that will be displayed at the responsive breakpoint selected, and a Nav element.
Nav element is nestable, and all the content at the header should be placed here.

Content tab

Settings group

Enable offset: if enabled, Sticky Header will hide when the offset value is reached.
Offset scrolling: determines how much distance to scroll to hide the header and to display it again.
Show when going up: if enabled, Sticky Header will display again as soon as the user scrolls up, and hide again when scrolling down.

Nav scrolling styles group

All Nav styles can be applied at it’s style tab. However, you may want to change Nav styles if you have “Show when going up” enabled so that it is legible when scrolling any point at the page.
Offset scrolling: determines the offset value where Nav styles available at this section will be applied.

Animation group

Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Responsive group

Nav element will collapsed at the breakpoint selected. There are several collapse animations available: Opacity, From Left (OffCanvas effect) and From Right (OffCanvas effect) and their animation properties can be customized at pleasure.