Sticky bar

The sticky bar is intended for use with site navigation. It has automatic hide and reveal behavior built in so it gets out of the user's way when they're trying to read the page content and comes back only when it's needed.

It can be seen above at the top of the page where it says "test content". Try scrolling up and down the page to see how it behaves.

Behavior

It will scroll away smoothly with the page content as the user scrolls down from the top of the page. If the user scrolls back up slightly, it will slide back into view, this time floating above the page content. If the user scrolls down again, it will slide out of view.

On desktop, when scrolled to the top of the page, there is no shadow dividing the sticky bar from the rest of the page content. As soon as the nav bar becomes floating, there is a shadow. On mobile, there is always a shadow. This is because, in this example, we have set the transparent-starting-at-breakpoint prop to a value of 'lg'.

Usage

It should be placed at the top of the page outside of any containers that are relatively or absolutely positioned, as it needs to be able to control its own positioning relative to the browser viewport.

You can place anything inside of it and it will adapt to the height of that content. It will also detect any changes to its height based on responsive breakpoints or other events and adjust its own positioning accordingly.

Coordination with other fixed position elements

If there are other elements on a page that also need to be fixed to the top of the viewport, in order to prevent overlap with the sticky bar, they need to know two things: (1) whether the sticky bar is shown or hidden, and (2) the height of the sticky bar.

Visibility is communicated via global events emitted through the useEsdsEvents composable. The text below is an example powered by these events and describes the current state. Try scrolling up and down and see how the text changes.

fixed sticky bar is hidden

The height is communicated via the CSS variable --es-sticky-bar-height made available on the <html> tag. It will update dynamically on resize. The box below is an example that uses this CSS variable to exactly match the height of the sticky bar. Try switching between mobile and desktop breakpoints and see how the height changes.

Additional sample paragraphs to test scrolling behavior

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In tellus integer feugiat scelerisque varius. Risus in hendrerit gravida rutrum. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Mi tempus imperdiet nulla malesuada pellentesque elit.

EsStickyBar props

Name: float-starting-at-breakpoint

Type: 'lg' or 'xl' or 'xxl' or ''

Default: ''

Description: If set, the sticky bar will float on top of other page content on the specified breakpoint and above, with no space reserved for it in the normal page flow. Below the breakpoint, the bar occupies normal page flow as usual. Operates independently of transparent-starting-at-breakpoint, since a transparent bar doesn't necessarily need to overlap page content (e.g. when shown over a body background color).

Name: transparent-color

Type: string

Default: 'transparent'

Description: If transparent-starting-at-breakpoint is set, this will be the transparent color used. Defaults to fully transparent, but use this to pass in a semi-transparent rgba() value if desired.

Name: transparent-starting-at-breakpoint

Type: 'lg' or 'xl' or 'xxl' or ''

Default: ''

Description: If set, the sticky bar will have a transparent background when scrolled to the top of the page on the specified breakpoint and above. This enables the nav to appear seamlessly integrated with a landing page hero section that has an image or background color other than white.

EsStickyBar global events

These events are not emitted directly by the component, but are instead transmitted via the useEsdsEvents composable and can be subscribed to via on() and off() methods.

Name: es-sticky-bar-fixed-hide

Payload: none

Description: Fires when the fixed state of the sticky bar is hidden.

Name: es-sticky-bar-fixed-show

Payload: none

Description: Fires when the fixed state of the sticky bar is shown.