Sticky Header

[webmaster698]

Hi all,

I am trying to look for a simple line of code I can add to my home page to make the header follow as a user scrolls on the page. I don't want to really get mixed up with Bootstrap to do it. I know there has to be something simple to just put in the page.

Does anyone know of something out there?

Thanks

[Jon Fritz]

Which browsers do you need to support?

The absolute easiest way would be to add "position:sticky" to the CSS of the container you want to stay put.

It works in all major browsers except Internet Explorer (works in Microsoft Edge).

if it's the Header of the page, and you want it to stay put, you can also use "position:fixed" instead. That locks the container where ever it appears, while position:sticky will move with the page scroll until it hits the top of the viewport.

[ALsp · Accepted solution]

.header {

position: sticky;

top: 0;

}

Substitute "header" with the actual class name assigned to your header.

"Sticky" works in all modern browsers and devices. The only issue is that you must not set the header or any of its parent elements to overflow hidden.