Fixing Headers in Rails

When trying to fix headers in Rails, we often end up using jQuery, which always seems to be involved.

If possible, I’d rather not use it.

So instead, we’ll use CSS’s position: sticky.

It’s super easy to use.

Just create a class or ID in your stylesheets for the element you want to fix:

# assets/stylesheets/position.css
.fixed {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}