Introduction
Chroma makes fixed and sticky containers that you can style as the page scrolls.
This is of course usually used for menus, but you can drop anything you like into Chroma. The slide up comment and social bar on this page is made with Chroma, as are all the menu containers on the BigWhiteDuck website.
Chroma can also control the elements within a menu. You may have noticed on the home page for this site that the menu bar background and items except the hamburger are hidden when the page loads. They then smoothly appear as you scroll down past the header image. This keeps the initial image clean and does not detract from its impact. Another solution would have been to simply use a sticky menu below the image. This is fine but it would require scrolling to navigate. but by just showing the hamburger component, visitors can instantly navigate.
History
Chroma began life as ScrollUp Pro about 18 months ago. With the advent of Stacks 3 child stack, it was suddenly possible to easily define multiple styles and settings for a menu. ScrollUp and SlideUp relied on just two states, when fixed (or scrolled) and when not fixed.
Chroma allows you to define unlimited styles, sizes and menu controls, all of which can be triggered from either scroll detection or using markers on your page.
Markers
Markers are the big game changer for Chroma compared to the previous stacks.
Markers allow complete and precise control of style changes, regardless of the device or page size. There is no more guessing and compromising as is the case with percentages, markers make it very simple to co-ordinate everything exactly.
Features
Chroma has all the features of ScrollUp, SlideUp and Pin in one convenient to use package. It is slicker, leaner and more powerful in every way.
Slide Away headers.
Slide Away add an extra zone above your menu and can slide away on demand, just leaving the main navigation. This also works well with the site navigation as the slide away content, leaving the in-page navigation visible.
Chroma is also ButtonBar ready and has some new positioning settings to really unleash the potential of ButtonBar and other menu layouts. If you want sticky on desktop and fixed on mobile, static on desktop but fixed on mobile or almost any other combination then Chroma will do it with a simple change of its settings.
Find Out More
There is so much that Chroma can do that the only real way to explore it is through the demo site, the instruction videos and of course to get the stack and play with it.
Get Chroma for free here.
I hope you enjoy Chroma and find it useful.