Easily receive support and donations for your creative work.
Buy me a coffee logo
Midnight.js Logo POPULAR

Midnight.js

POPULAR

A jQuery plugin that lets you subtly change your headers to make them match the content as you scroll.

Try Midnight.js
Midnight.js Website Screenshot

What is Midnight.js?

Try Midnight.js

Midnight.js empowers you to seamlessly switch fixed headers on your website. As a user of this website, Midnight.js provides you with the ability to dynamically change the appearance of your fixed navigation (or header) as you scroll through different sections of your page.

You can easily create your fixed navigation using your preferred markup, ensuring it works well with the position: fixed CSS property. By adding the data-midnight attribute to each section that requires a different header style, you can specify the corresponding class for styling purposes. If no class is provided, the default style will be applied.

Styling your headers is straightforward using the provided CSS classes. Each section's header will be automatically switched based on scrolling. To make the magic happen, simply include the Midnight.js jQuery plugin and initialize it with the appropriate selector. For further customization, you have the flexibility to use custom markup for each header by adding the appropriate div with the corresponding class.

Published on Oct. 31, 2023