Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll. The header on demo site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.
Best jQuery Fixed Header Plugins & Tutorials with Demo
stickUp : jQuery Plugin to “sticks” an Element
stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make any element, on any page, stick to the top of the browser window as the user scrolls past it. This feature is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.
Fixed header and column jQuery Datatables
Uses jQuery datatables to make a responsive datatable with a fixed header and a fixed column.
Features:
- Regular markup
- Styled with Bootstrap 2.3.2
- Scrolls to first non-empty cell when you click header or left column
- Resizes height and width on browser resize
jQuery Top Bar Offers Promoter
The jQuery Top Bar Offers Promoter is the best way to emphasize the offers on your website. All the special offers will be instantly seen by your potential buyers.
Features:
- Over 50 js options from where you can customize the plugin.
- You have parameters to change anything: colors, images, backgrounds, borders, dimensions.
- The top bar promoter is responsive for both fixed dimensions or full width versions.
- It is compatible with IOS and Android operating systems.
- Options to add social icons in order to promote your website on all the available channels.
- SEO Friendly
- Centered or full width
On Scroll Header Effects with jQuery & CSS3
You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animations. We’ve also created a Blueprint for an On-Scroll Animated Header to get you started.
Today we’d like to give you some inspiration for animated headers and show you what kind of effects could be used to spice up your website’s starting element and give it some life.
Scroll Activated Fixed Header Animations with jQuery & CSS3
It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines. When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.
