Fixed Div With sticky.js

Design help Custom code
1

Fairly new to Javascript!

1. I am using sticky.js to create a fixed column on the side of the page “the outskert” on this website, and it seems like it is loading pretty slow. I know I have several images on the page and a streaming video, but is there any way to force sticky.js to load before the page shows its content so it doesn’t jump?

Right now the sticky.js code is placed before on the individual page settings.

2. Right now the sticky.js code does not work on smaller laptop screen sizes, and I have included the “data-sticky-for” data attribute to no avail. How can I get the sticky effect to persist on smaller screens?

Preview Link:
http://nohmii-stage.webflow.io/shop/the-outskert

Read-Only:
https://preview.webflow.com/preview/nohmii-stage?preview=dde7062615413c3a1c19ea9f1c63ce9b

2

Hi.

1

Looks very slow this is js issue (when i disable JS the page load fast).
r u sure this is a sticky.js issue? (This is tiny gzipped: ~1.67kb - JS library).

Ideas (I can not publish the site to test this):

  • Try to change the viemo-video autoplay to false.
  • Try to remove the video

About load JS before page shows - this is really tricky (beacuse you need the DOM to manipulate elements)

2

Read docs:
option: data-sticky-for | Type: number | Default: 0

Breakpoint which when is bigger than viewport width, sticky is activated and when is smaller, then sticky is destroyed

In your case you add this att data-sticky-for="600" (Like saying destroy sticky under 600px viewport width).

General:

  • data-sticky-container="product-cols" - illegal (Follow the docs - this att dont get values)
  • add bigger data-margin-top (For now the sticky hidden by the navbar)