StickyBars - Fixed Bars Animated on Scroll

StickyBars is a web element that can be used to display informations on your site while scrolling on the pages. These bars can be horizontal or vertical and they can stick to any edge of the browser. You can have several bars on a same page with different options for each one (colors, CSS3 effects, position, etc.)

Features

• 4 positions (top, bottom, left or right)
• Can be used as a header or a footer
• Horizontal and vertical layouts
• Original way to display informations, links, navigation, etc.
• Works with anchors or pixel offset values
• Sticky elements revealed on scroll
• 17 CSS3 effects with a simple fade fallback for older browsers
• Can hold lists, texts, headings, navigation elements, etc.
• Easy setup with jQuery options
• Dark and light color schemes
• Clean and organized valid markup
• Designed and coded for desktop computers, tablets and mobiles

What you get

The package contains 5 HTML files that can be used to easily setup your own StickyBars. All the code is organized, indented and easy to read. The script comes with an uncompressed version and a minified version.

Compatibility

StickyBars has been tested on several devices and browsers to ensure a maximum compatibility : Internet Explorer, Firefox, Chrome, Opera, Safari have successfully passed the tests. Here’s a list of compatibility :

• Internet Explorer 9+
• Firefox
• Chrome
• Opera
• Safari
• Chrome on Android
• Safari on iPad and iPhone

Please keep in mind that CSS3 effects are not available for all browsers, for example these StickyBars look acceptable under Internet Explorer 8 but it’s much better from Internet Explorer 9 for example.

Changelog

7/04/2014 – Version 1.0

• Initial Release