Cling

Animated sticky content for RapidWeaver Stacks

Scroll Down

Cling

About

Cling is a content wrapper stack that will automatically "cling" to the browser screen when you reach its scroll position. The vertical position in the window can be defined while horizontal position and sizing is automatic based on the stack defaults. Check it out by scrolling through this section.

In this example, the image stays in the middle of the browser window on scroll. This is useful when the text continually references some image or content that may not be in view because the text stretches too far down the webpage. The content in the section wont be so long, so for the sake of the example we have added some space.

There will come a point when the image or content no longer needs to be visible. So cling allows you to optionally set where you want the stack to detach from the browser window by defining a scroll past point.

Keep Scrolling

Styles

Cling comes to life when using built-in style options by helping the contents stand out, especially when transitioning from static to "sticky" positioning. Each of the settings can be adjusted for each position and the stack will apply a smooth animation during transition.

Background

Styles

Background

Styles

Rounding

Styles

Width

Styles

Border

Styles

Shadow

Styles

Padding

Features

Positioning

Show/HIde

3rd-Party Content

Features

Cling has some features to help set it apart from your normal "sticky" or fixed position stack. Check out the examples below to see the things that it can do.

Keep Scrolling

Positioning

Content can cling to any vertical position in the browser window. All you need to do is select top, center, or bottom and then optionally set an offset value to adjust the position somewhere in-between. The horizontal position is handled automatically and is determined by where the content is placed. Once the it has attached to the browser window the content will keep its shape as well.

Cling also includes an option to expand the width of the content to the browser edges. This allows you to place things like toggles, buttons, messages, and links outside of the content area restriction that may be set by the theme you are using. This is also useful when you are wrapping a menu stack, like in the navigation bar above.

Keep Scrolling

Show/Hide

Use handy class names to swap, show, or hide content when the stack attaches to the browser window. Use this feature to condense things that should take up less window realestate. On the contrary, expand things to draw attention or reveal more details. You can also swap out images to match color changes that may have been applied through the wrapper styles.

Keep Scrolling

3rd-Party Content

While fixed position text can help display important information, mixing in 3rd-party content can expand functionality. In this example we've added a contact form, hidden inside of a pop out container that attaches to the bottom right of the window.

* The form is for demoing purposes only, no message will be sent. This example uses 1LD stacks: Notice, Press, and Super Forms.