We present the very popular fixed, on scroll animated header that changes it’s size and the orientation or visibility of the components within based on the user’s scroll action. As the user begins to scroll and engage with content, the header area is elegantly minimized to leave more of the viewport open for content.
Best jQuery Fixed Header Plugins & Tutorials with Demo
Pagescroll : jQuery animated scroll Menu
Create animated scroll menu with jQuery
Features:
- vertical or horizontal display
- absolute, fixed or inline styles
- left, right, top or bottom aligns
- configurable background color, font sizes, colors also configurable via CSS
- smooth animation during pagescroll
- fade in / fade out effect when user scrolling
Stickyfloat : jQuery Animated Fixed Position Element Plugin
This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs. This plugin solves that problem with as little code as I could possible get it so it will run in the most optimized way, while also allow you to customize it in many important ways which might suit you best.
Features:
- Can handle many floated elements, each with it’s own settings
- Floated elements’ movement can be bound inside their parents’ area
- Uses Native javascript easing, but using CSS3 transitions would be the optimum (not for IE)
- Has many settings, such as stick to the bottom or animation style
- Code is very maintainable and higly efficient
Smart (Auto-Hiding) Website Header & Footer using jQuery
There are plenty of reasons for using a sticky header navigation in your website. It provides easy access for top-priority links, plus a way back to the homepage from anywhere on the site. However problems may arise when you have a navigation bar which blocks some of the page content.
In this tutorial I want to demonstrate how we can build a locking header bar which will auto-hide itself after scrolling down the page. Also when scrolling to the very bottom we will display a small footer which includes many of the same nav links.
Zebra_Pin : jQuery plugin for Pinning any Element to the Page
A lightweight and adaptive jQuery plugin for pinning any element to the page or to a container element, so that the element stays visible even if the user scrolls the page. This type of elements are also referred to as “fixed position elements” or “sticky elements”.
You can use it in your projects to create sticky sidebars, sticky navigation, sticky headers and footers, or anything else you feel the need to make it stick to the page while the user scrolls.
Features:
- elements can be pinned inside a container element, not just to the page
- custom events are fired when pinning/unpinning elements offering even more control
- it is small – it weights around 2KB minified offering the best ratio of features per used bytes
- it’s cross-browser – works in every major browser and IE7+
