Sticky Menu Bar

Probably you've noticed menu bars that stick at the top of web pages. Sometimes they contain other information or ads instead of menus.

The sticky menu bar, or other content, is published somewhere on the page. Generally, it's near the top. Yet, it also works for content published further down.

When you scroll down and past that menu or other content, the content sticks at the top of the page. The rest of the page scrolls under it.

You may have seen a similar effect within a scrolling div. As the div scrolls, a section of it sticks to the top of the div while the rest scrolls under it.

It's done with the CSS position:sticky; declaration.

Compatibility Notes

The sticky value is a recent addition to the CSS position property.

My latest information tells me Edge desktop doesn't support position:sticky;. Safari desktop requires the -webkit-sticky value, position:-webkit-sticky; being the entire declaration.

Other popular browsers support it.

If not supported, position:sticky; degrades to position:relative; and behaves like a regular div. The div's content will publish in place, but won't be sticky.

Live Examples

The two examples illustrate two ways position:sticky; can work — sticky when a page scrolls and sticky when a div scrolls.

Page Scrolling Sticky

To see the effect of the page scrolling sticky example, scroll down past the example.

The bordered "[menu/other content]" text will be sticky 10 pixels from the top of the browser window while the rest of content scrolls under it.

The bordered "[menu/other content]" text is in a div with the CSS to make it sticky. Here is the source code of the entire div.

<div style="
    position:-webkit-sticky;
    position:sticky;
    top:10px;
    border:1px solid #ccc;
    padding:.5em;
    width:100%;
    text-align:center;
    font-size:1.5em;
    font-weight:bold;
    background-color:rgba(255,255,255,0.8);
    z-index:2;">
[menu/other content]
</div>

Only the first three CSS declarations are needed to make sticky content. The rest you see in the example code is optional design for the div.

The position:-webkit-sticky; declaration is for Safari desktop browsers and position:sticky; is for other browsers.

The top:10px; is needed to specify how far from the top edge of the viewing window that the sticky content shall stick at. Without the top property, the content won't be sticky. The top value may be 0 (zero amount) or even a negative amount, like -1em, but must be present.

Div Scrolling Sticky

For the scrolling div sticky example, scroll the div down past the part with the blue background. The part with the blue background will be sticky at the top of the scrolling div while the rest of div content scrolls under it.

Here is the source code for the sticky part.

<div style="
    position:-webkit-sticky;
    position:sticky;
    top:0;
    background-color:blue; 
    color:white;
    text-align:center;
    padding:.5em 0">
The sticky content
</div>

You'll notice the same position:-webkit-sticky; and position:sticky; declarations as were used for the page scrolling sticky.

The top:0; declaration has a value of 0 (zero amount) so it sticks at the very top of the div.

Sticky Content

As the illustrations show, the sticky content isn't restricted to menu bars. Any content can be made sticky.

Sticky content can be stuck to the top of the page or to the top of scrolling divs.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager