From Uncode version 2.6.0, you can use a new interactive model for the Posts and Media Gallery module named Sticky Scroll. Sticky Scroll creates a jaw-dropping horizontal scroll-based animation. Sticky Scroll offers a different and modern user experience when users scroll down the page. In fact, during the scrolling moment, the standard vertical scroll of the content is interrupted, and a horizontal scroll is automatically triggered. You've probably seen this effect on some recently awarded design sites.

The following section takes up the whole viewport and sticks on top until the horizontal scrolling ends. The section then unsticks, and the scrolling resumes.

Below we see some examples of Sticky Scrolling:

• Features Sticky Scroll
• Creative Photographer
• Creative Studio
• Portfolio Developer
• Portfolio Albums

How it works

To activate Sticky Scroll on your page, insert a Posts or Media Gallery module in your page, and in the General tab, set the option Sticky Scroll, screenshot .

Next, you can define the optional Wrapper method:

• Row: other modules inserted in the same Row will scroll together with the module's contents.
• Column: other modules inserted in the same Row will remain fixed to the layout and will not scroll together with the module's contents. This option, for example, can be helpful if you want to insert a title always visible.

In the Module tab, there are different options to define the thumbnail ratio. Please note that it is essential to find the correct thumbnail size according to your layout because if the thumbnails go out of the viewport (i.e., are cut at the bottom), it will not be possible to show it. Please find the possible settings:

• From 'Regular' to '9:16': this method defines thumbnails with a fixed 'ratio'. With this method, it's possible to determine for the three main breakpoints the number of visible elements.
• Fluid: this method defines thumbnails with a 'fluid' layout. With this method, it's possible to determine both the number of thumbnails and their height for the three main breakpoints.
• Relative: through this method, thumbnails with original ratio but the fluid height will be defined.

Requirements and notes

To best understand how to use Sticky Scrolling, what are the best scenarios in which you can use this mode, and the scenarios in which not to use it, it is essential to understand how this script technically works.

• The width of the contained div is equal to the height of its parent section. The parent section is used as a trigger and controller for horizontal scrolling the content div. The same scrollable size, thanks to the Scroll Trigger element, makes the scrolling feel natural, screenshot ;
• It is highly recommended always to use a Posts or Media Gallery with Sticky Scroll with 100% height Row. This is required when using Fluid and Relative heights;
• As for Slide Scroll, Sticky Scroll is supposed to work on a blank page. For example, it cannot be used in default templates like Portfolios or Blogs with sidebars.
• Note that you can't insert another module in the same Row after a Posts or Media Gallery with the Sticky Scroll option;
• Be careful not to use anchor elements to implement One-Page scroll functions after a section with Sticky Scroll because the vertical and horizontal scroll of the page cannot be mixed to result in a perfect arrival position;
• If you use it in a Header Content Block, it must be the only Row;
• It can cause problems with the boxed site layout because it goes in position fixed, and you can't apply the 'overflow: hidden' property;
• Take care if you embed videos like Vimeo and YouTube because they are designed to have a specific ratio format.