Sticky Header

By default the Canvas header sticks to the top of the viewport once you scroll past it. This is handled by the headers.js module (CNVS.Headers), which adds the .sticky-header class when the scroll position passes the header offset, and optionally shrinks the header. All behaviour is configured through data-* attributes on <header id="header">.

Enabling / Disabling

Sticky is on by default. To turn it off, add no-sticky:

<header id="header" class="full-header no-sticky">

Internally the module checks: var isSticky = !elHeader.classList.contains('no-sticky');

Sticky Data Attributes

These are the real attributes read by headers.js:

Attribute	Values	Purpose
`data-sticky-class`	e.g. `not-dark`, `semi-transparent`, `dark-color`	Classes applied to the header while it is sticky. Used to flip a transparent/dark header into a solid one on scroll.
`data-responsive-class`	e.g. `not-dark`	Classes applied on mobile / responsive (non-expanded) layouts.
`data-sticky-shrink`	`true` (default) / `false`	Whether the sticky header shrinks. `false` disables the shrink effect entirely.
`data-sticky-shrink-offset`	number, default `300`	Pixels scrolled past the sticky point before the shrink (`.sticky-header-shrink`) kicks in.
`data-sticky-offset`	number or `full`	Custom scroll offset at which sticky activates. `full` uses the viewport height.
`data-sticky-offset-negative`	number or `auto`	Subtracted from a `full` offset. `auto` subtracts the header's own height.
`data-sticky-logo-height`	number (px)	Logo height applied while sticky (used with a custom sticky look).
`data-sticky-menu-padding`	number (px)	Menu link vertical padding applied while sticky.
`data-mobile-sticky`	`true` / `false` (default)	Enables sticky behaviour on mobile as well.

Class Flip on Scroll (most common pattern)

A transparent dark header that becomes a solid light one when sticky:

<header id="header" class="transparent-header dark"
        data-sticky-class="not-dark"
        data-responsive-class="not-dark">

When sticky, the module reads data-sticky-class, splits it, and applies each class. It special-cases not-dark and dark so the wrapper theme flips correctly.

Disable the Shrink Effect

<header id="header" class="header-size-sm" data-sticky-shrink="false">

Full-Height Offset

Fire sticky only after the visitor scrolls one full viewport (great for full-screen heroes):

<header id="header" class="transparent-header dark"
        data-sticky-offset="full"
        data-sticky-offset-negative="auto">

Custom Sticky Logo and Padding

<header id="header" class="transparent-header dark"
        data-sticky-class="not-dark"
        data-responsive-class="not-dark"
        data-sticky-logo-height="80"
        data-sticky-menu-padding="29">

How Shrink Works (CSS)

The module adds .sticky-header-shrink, which swaps the header height variable:

#header.sticky-header-shrink {
	--cnvs-sticky-header-height: var(--cnvs-header-height-shrink);
}

Notes and Tips

The module clones the header into a .header-wrap-clone placeholder so the page does not jump when the header becomes fixed.
Sticky is skipped for side-header layouts (body.side-header).
Combine data-sticky-offset="full" with data-sticky-offset-negative="200" (or auto) to fine-tune exactly when a hero-overlay header snaps to solid.
data-mobile-sticky="true" is needed if you want the sticky class flip to also run on small screens.

Settings

Setting	Description
`.no-sticky`	Applying this Class will deactivate the Sticky Header
`data-sticky-offset`	Enables Sticky Header after a defined offset from the Top Example: `200`
`data-sticky-offset-negative`	Defines a Negative Offset for the Sticky Header. Used when the Sticky Offset is set to full Example: [ch_pre] [/ch_pre]
`data-sticky-shrink`	Enables Shrinking feature on the Header when Sticky Example: `false`
`data-sticky-shrink-offset`	Enables Shrinking feature after the Sticky Header reaches the defined offset Example: `400`
`data-sticky-class`	Applies a Defined Class on the Sticky Header Example: `not-dark`
`Logos on Sticky Header`	Check this Example for using an Alternate Logo on Sticky Headers: http://docs.semicolonweb.com/docs/getting-started/logo-settings/#docs-snippet-sticky-logo
`data-mobile-sticky`	Enables Sticky Headers on Mobile Devices Example: `true`

Was this page helpful?