Scrolling images with fixed sidebar

Design help General
1

I am trying to create a layout similar to this where there is a feed of images that scroll, but the two boxes on the side stay fixed, but can still scroll to reveal the rest of their contents.

Maybe someone can help me wrap my head around what they are doing on the sample site I posted.

The page is called “Product Page - Stage” on my read-only.

Here is my site Read-Only: https://preview.webflow.com/preview/nohmii-stage?preview=dde7062615413c3a1c19ea9f1c63ce9b

Here is my live link:
http://nohmii-stage.webflow.io/product-page-stage

2

No way to make this effect by Webflow Editor (For now - mabye with interaction). This is very simple trick called sticky. This is the idea in your example (bound):
https://getuikit.com/v2/docs/sticky.html#sticky-boundary

Sticky provides an easy way to attach elements to the page when the user scrolls such that the element is always visible. Sticky-Kit | jQuery plugin for sticky elements

Option 1/4: By regular CSS

Regular CSS position: fixed; could work but depend on the design you want (not in your case beacuse in some point by JS the position:fixed remove and you can regular scroll to the footer)

Option 2/4: By CSS (position: sticky) -

!! not well broswer supported yet
https://webflow.com/website/Example-of-Sticky-Left-Menu-for-cloning

Option 3/4 (NEW): By intercation V2

Option 4/4: By JS (well supported)

How to. For example this libary (OR choise any other plugin)

  1. include - Add Cdn.min or JS (copy-paste this code) - Where? before body (Read section “Individual Page Body Code” her)

  2. Add structure (divs, cols and so on) - and Add class “selector” to the element.

  3. Initialize with javascript

    document.addEventListener("DOMContentLoaded", function() {
         var sticky = new Sticky('.selector');
    });
  1. If you want in your case left-col and right-col to be sticky and the center to be scrollable - this is very close to your example:
    GitHub - rgalus/sticky-js: Library for sticky elements written in vanilla javascript

How to add data-sticky-container (remember bound?) attribute? and other attributes - very easy

JS - Desktop only:

Most of the time you dont want sticky on mobile so use this (“data-sticky-for” tablet/desktop webflow breakpoint)
<img src="http://placehold.it/250x250" class="sticky" data-margin-top="20" data-sticky-for="768" data-sticky-class="is-sticky">

NOTE: You see the results only on the publish / live website

STEP 2 - read docs and try this. If this wont work add URL

1 Like
3

Awesome! Yes this is exactly what Im trying to do thank you.

I think I was able to get it to work alright, but when the VH gets too small, it disables the sticky. Is there any data attribute that will allow it to work with a smaller window size?

Thanks again for the help.

4

Again. Sticky on mobile work the same as desktop but will hide most of the content. What code you use to install the plugin? (data-sticky-for - disable sticky on mobile. Remove this is if you want)

5

I’d like to keep the data-sticky-for attribute for VW, but on desktop, sticky disappears at a smaller VH, and I am trying to pinpoint why in the script.

I used the script you sent in step one.

Current page:
http://nohmii-stage.webflow.io/product-page-stage

6

This is not valid option:
data-sticky-container="product-cols" (its like writing "data-sticky-bla-bla=“wow” - no meaning) -
parent is “data-sticky-container” (or entire page - if you dont use this) - child you want to “stick” use -
"class=“sticky” (and “options” if you want to change the Default).

Inside your link i dont see any sticky effect (no errors - but wrong implementation)

ALSO - what do you mean when you saying “smaller VH” (very general term)

7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.