Scroll Up

ScrollUp allows you to control between two states dependent on where on the page you scroll to. For each state you can specify, color, opacity, padding and height and the transition time and effect between them.

With these simple controls you can animate not only the Foundation TopBar but also a host of other features on your pages.

Several people requested the ability to have TopBar behave like many of the famous RapidWeaver themes, where upon scrolling the page, it changes size and opacity.

ScrollUp does exactly that. Simply drop your TopBar into the stack, set your preferred appearance and scroll behaviour and thats it.

When used with TopBar, the padding controls allow you to animate the position of the items on the bar.

ScrollUp provides all the colors and opacity. TopBar is therefore set to transparent to allow scrollUp to show through. If selected, ScrollUp does this automatically.

When using a transparent TopBar be aware that by default, any dropdown menus will also become transparent. ScrollUp therefore has a dropdown menu styler built in to allow you to set the colors and opacities for all four possible states: NonScrolled[desktop/mobile] and Scrolled[desktop/mobile].

You then have a TopBar that fits with many modern designs, particularly those with transparent navigation and background images.

ScrollUp can do so much more than TopBar animations, in fact it can animate any stack at any given scroll position.

ScrollUp footers work really well. You can see them in operation on some of the pages on the Scroll Up Demo Site.