Plus Stacks
Plus stacks contain original code
© Joe Workman
Community Links
Scroll Up - Foundation Footers Reimagined
ScrollUp Footers
You can put a footer in a slide up and just show when required
Because the footer is fixed, you can show it all the time if you want to.
You can even put your magellan navigation in the footer if you wish
Note: the rest of this page is the same as the home page, just scroll down to see the footer
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 go 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