Scroll Up - Foundation TopBar Reimagined
An Alternative Feel
ScrollUp from Big White Duck can transform the feel of a Foundation site with a simple state change of the TopBar.
ScrollUp is a stack with a DropZone into which you can drop a TopBar.
ScrollUp does all the work, your TopBar is unaffected
ScrollUp also works to animate other elements and other menus on Scroll
You already knew that Foundation was the only theme you would ever need. Here is even more proof.
Big White Duck Stacks
Although ideally suited to TopBar Menus, there are many uses for ScrollUp.
ScrollUp simply animates height, padding, background color and opacity.
The Duck on the left is in a ScrollUp stack which also contains another ScrollUp that houses the title, set to appear slightly after.
Every page on this site has a different ScrollUp effect, even the Stack Settings Page.
Be sure to visit them all to see what ScrollUp can do
Built for Foundation
TopBar Ready
Because ScrollUp comes from
Big White Duck you know that it is Foundation optimised.
Automatic removal of TopBar background
Automatic Detection of Mobile Menu Mode
Full user control of Drop Down Colors and Opacity
Fade In DropDowns
(Special Bonus Feature from TopBar Surgeon)
Minimally Invasive
The only alterations that ScrollUp makes to the TopBar are Background Colors and Opacity
Your Menus will behave exactly as you expect
Height and Padding is controlled within the ScrollUp container
Finally,
Hands Off Responsive Behaviour
ScrollUp detects when TopBar has transitioned to mobile mode automatically
You do not need to co-ordinate breakpoints, just set up TopBar as normal and your mobile menus will be styled by ScrollUp when necessary
This is particularly important when dealing with transparent TopBars
Control
ScrollUp gives you full control of the Dropdown color and opacity for the four possible states -
desktop or mobile when scrolled or not scrolled
Smart Effect Suppression
It doesn't make sense to change height and padding on small screens
ScrollUp automatically suppresses these effects when TopBar switches to mobile mode
Limitations
Pad With Care
If you go overboard with padding effects then there will not be room for the TopBar Menus
Use Responsive Padding on Images
ScrollUp can be triggered at either a pixel height or a percentage height of the page
Even using percentages ScrollUp cannot account for other elements changing aspect ratio as the screen width is changed. Their relative position down the page will change
What's Next
ScrollUp Pro
Advanced Scroll Detection
Using InView technology and ScrollUp Markers
More TopBar Styling
Menu Colors, Fonts and Sizes
Sticky Mode
For full design flexibility
Plus Stacks
Plus stacks contain original code
© Joe Workman