A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes.
Best jQuery Fixed Header Plugins & Tutorials with Demo
jQuery.Pin : Pin any element to the top of a container
Ever wanted to pin something to the side of a text? Ever needed a subtle sticky element to quietly hang around as you scroll down?
Jquery.Pin is here to help! Pin any element to the top of a container. Easily disable it for smaller screen-sizes where there’s no room for that kind of shenanigans.
Slide and Push Menus in CSS & JavaScript
A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”.
There are examples of how to trigger the opening and closing of the menus and some example media queries.
jQuery lockfixed
Allow elements to stick within viewport when scrolling. Toggles position: fixed only after scrolling the viewport. Degrades nicely on mobile and tablet browsers.
Supports:
- Doesn’t overflow footer because footer pushes elements up.
- Doesn’t need any hardcoded CSS tricks.
- All major browsers through position:fixed and iOS/Android/IE7 degrade through margin offset.
- Fixes tablet and mobile zoom issue with fixed
- Offset position from top and bottom within scrolled viewport.
- Super light weight: 2.6kb uncompressed.
- Div layout structure can be floats or position: absolute support.
Fixed Table of Contents Dropdown Menu with jQuery
A fixed table of contents drop-down menu jQuery plugin.Just change the markup to add more depth to the menus. The script should automatically recognize deeper menus, as long as you have the corresponding sections in the content area.
If you want to go deeper than three levels, you’ll have to add some extra CSS to indent the menus. Just look for the part with “li li li” and adjust accordingly.
jQuery Plugin for Fixed Header Tables
jQuery plugin for tables with fixed headers.FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released.
Some options include a fixed footer using the tables tfoot element or cloning the thead as a fixed footer. This plugin is meant to be lightweight, easy to use and performant.
