test content

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.

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.

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.