The easiest way to have headers and footers revealed on scroll with advanced features. Sample project included.
- Header and footer are optional (if header is specified, footer is optional; if footer is specified, header is optional) with handling variants. - Header and footer are automatically expanded to full width. - Optional custom shadows for enhanced visual effects with graceful fallback in case they are not supported. - Tab order in its natural order for navigability standards (header and footer are automatically revealed when needed). - Advanced RTL, RWD and fluid support. - Automatic detection/support for both fixed or floating layers schemes. - No cut-out elements/backgrounds on horizontal scrolling. - Advanced fixed and horizontal scrolling handling. - No header/footer overlapping on browser-resize. - Advanced header-footer collision handling in case of fixed header on small screens. - Decent fallback on unsupported or problematic scenarios (like some features on mobile devices and RTL schemes on IE7 and earlier). - Lightweight and maximum cross-browser with backward compatibility, no jQuery required.
* Just a brief about some of the changes that were made lately...
* New in version 1.2
- Improved support for layout-grids to be used as header. - Added support for layout-grids to be used as footer. - Minor code tweaks.
* New in version 1.1
- Optional vertical parallax effect on scroll for the header and the footer (with different ratios). - Customizable virtual separators between the header/footer and the page contents. - Fallback improvements.
How to use?
1. Optionally, design a header as you usually do (a standard layer element). 2. Design the page contents below the header, if exists. 3. Optionally, design a footer as you usually do (a standard layer element), below the page contents. 4. Drag and drop the extension and setup it specifying the header and/or the footer and, optionally, the shadows. 5. Preview or publish.