Making a visual component sticky

1. If you would like to enhance the performance of any visual unit after selecting YES next to “Is there a visual component” look below for the check box beside “Make visual element sticky”

Once you check the box additional options will appear that will allow you to specify the behavior of the visual element on the page.

 

 

 

2. Once you check the box additional options will appear that will allow you to specify the behavior of the visual element on the page.

Stick to top: The unit will remain visible at the top of the viewport once a user scrolls past its viewable location on the page.

 

Stack beneath other sticky elements: When multiple units are sticky they will stack and not cover up other units.

 

Stick to bottom: The unit will remain visible at the bottom of the viewport once a user scrolls the entirety of the unit into visibility.

 

3. Select the behavior for unsticking the elements next. In order to ensure the best user experience some elements may need to unstick to allow for key page elements to be properly viewed. Others may not cause an issue and can be allowed to remain sticky in all instances.

 

Never unstick: The element will always remain stuck according to the vertical alignment previously selected.

Vertical element encountered: The element will unstick when another item is encountered.  You can use this to make sure key page elements are not covered.

Reaches adjacent CSS element: You can set a specific CSS trigger for more accurate control of sticky behavior.  Once the CSS selector is reached the element will cease being sticky.  The CSS selector must be vertically aligned with the sticky unit.

 

 

4. One important note is that you should enable manual scrolling for page elements with separate scrolling parameters.

e.g. If you want to allow the right rail to scroll separately from the main content well.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.