Proper way to change how long sticky position lasts?

Design help General
1

Hi, I want to make the section with the Background video class to stick for longer time. What is the proper way to make it sticky for more time?

Also, should I add sticky position to the background video or the section it is in and why isn’t it working on mobile view?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Element stays sticky as long as its parent is still in the viewport. Solution: increase the height/length of the parent.

The sticky property is to be set on the object that will stick.

3

Thanks! Any idea why the background video is not staying sticky on mobile view?

4

Please specify where exactly and what exactly in your read-only is not working as intended.

5

The sticky position for the background video

6

Can you check out the read-only link. I don’t understand how to properly increase the length of the parent. I increased the bottom margin of the section the background video is in to make it bigger but it still does not stick for more time https://preview.webflow.com/preview/fooxea?utm_source=fooxea&preview=642701297951d08087e9cba40bd86c2b

Edit: Seems like the only thing that works is to increase the margin top of the paragraph under the background video but it still doesn’t work on mobile

7

Your read only is not working, please reshare.

“Last longer” is only the time that parent section is physically on screen. The higher your parent section the more time its stickied child will stay on the screen. Increase it’s height by inputting whatever number will feel good to you in the element’s height property to achieve longer on-screen time. no need to touch any margins.

8

Wow! Thank you so much! I understand how it works now :slight_smile: I increased the vh of the parent element to twice the size of the background video so now it stays twice as long as it’s initial height.

I updated the read only links.

Can you help me with my preloader? The jellyfish image is supposed to loop up and down. The website should also not be scrollable while it is loading and the navbar shouldn’t appear before the preloader is finished.

9

You need to show your preloader first in the “when page starts loading” part of your ix. Same where you have your jellyfish animation. And then remove it in the “when page finishes loading” part.

Your jellyfish won’t loop its animation unless you check “loop” in the animation options.

10

I changed it so it appears in “when page starts loading” and to dissapear “when page finishes loading” but the navbar still appears first and the jellyfish animation is very choppy it skips frames instead of smoothly going up and down.

EDIT: fixed the navbar appearing first by changing its position to relative and setting a z-index of 1 but the other issues still remain. The animation isn’t smooth at all

11

Looks smooth to me to be honest.

12

weird, what browser are you using? I’m using safari and the jellyfish just cuts from up to bottom

13

Can you please show a screen recording? Chrome looking good.

14

yep, here’s an example. Is it possible to prevent scrolling while the preloader is active?

15

Interesting. This is what I see. And the ix looks to be set up right.

16

oh wow that’s odd. Maybe it is a safari issue =\

Could you help me add the social media icons to appear on the top right of the navbar while leaving the main links centered? It’s that last thing I need to fix : )

I want them to appear on the top right on desktop view and all on one line in the dropdown menu in mobile view.

17

Here is the setup.

I removed the container form nav, replaced it with 100% width div with the display set to flex. I placed all social links into one div, put this div inside nav, gave this div position:absolute, and placed it to the right.

18

What did you do with the menu button?

19

removed it - it wasn’t used in your design anyway.

20

It’s used for the mobile view though