aerolab/midnight.js

Midnight.js is a small jQuery plugin that changes the appearance of a website's fixed navigation bar as the user scrolls down the page. Instead of having a single header style that may clash with different sections (a dark logo that becomes unreadable over a dark image, for example), Midnight automatically swaps in a different version of the header as each section comes into view. The way it works is straightforward. Developers create a single fixed navigation bar in HTML as usual, then tag each page section with a custom attribute indicating which header style should be active when that section is visible. Midnight reads those tags as the page scrolls and clips the visible header to match the right style at the right moment. Multiple distinct header designs can be defined by writing different CSS classes, and Midnight handles the switching without any extra JavaScript beyond a single initialization call. For sections that need more than just a color change, the plugin supports custom markup per header version. A section might display a header with completely different inner elements, not just a different background color. All header versions are required to be the same height, since they are layered and clipped rather than swapped out entirely. The plugin can also run in multiple instances on the same page with different trigger attributes, which is useful if a site has more than one fixed navigation bar that should respond to different scroll sections independently. Known limitations include choppy behavior on older iOS and Android devices, where the scroll position does not update smoothly enough to keep the header transition fluid. The plugin is available through npm and Bower, and can be loaded from a CDN. It requires jQuery to function.