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.
Stacks Image 4711

Keep Scrolling
ionicons-v5-a

Keep Scrolling
ionicons-v5-a

Keep Scrolling
ionicons-v5-a

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

    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

    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.

  • Rounding
  • 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.

  • Width
  • 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.

  • Border
  • 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.

  • Shadow
  • 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.

  • Padding
  • 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
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    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
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Stacks Image 5732
    Stacks Image 5721

    Show/Hide

    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
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    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.
    Autoreply
    From
    Subject
    HTML Body

    Keep Scrolling
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Keep Scrolling
    ionicons-v5-a

    Stacks Image 6181

    Get the Cling Stack for RapidWeaver today! Purchase includes a demonstration project file.