When scrolling - make an element fixed only within a specific section

Design help Animations & Interactions
1

Hi,

Super excited about IX 2.0 - because I think it is going to allow me to finally implement an animation that I have been waiting to do on multiple projects multiple times.

So, what I am trying to do is to fix an element, which in the below example is a div block that contains both the form (cta: get updates) and link (cta: try it for free) when scrolling within that section - it’s the section with the blog content.

Once I have reached the bottom of that section, I want the above mentioned div block to scroll up.

I believe Webflow is using a similar if not the same animation for the share function of their own blog.

I have honestly been trying to do all the necessary research to make it happen myself, but am a bit lost, as I don’t know how to animate an element (div block) with an element (section) that I am animating.

Here is my public share link: Stop, collaborate and set up a tech cafe | BizDojo
(how to access public share link)
https://preview.webflow.com/preview/bizdojo-dev?preview=82236ea3b4da9f477068749a1f734adb

2

Usually better to achieve that using the position: sticky property but it doesn’t have the best browser support at this time so we don’t have it available natively yet.

So usually something like this does the trick to keep something fixed within a given relative positioned parent:

<style> 
.class-name { position: sticky; top: 0px;} 
</style>

You definitely could achieve something close to that with some interactions and scroll position/vh/vw movement.

1 Like
3

interesting, cheers.

So, do I just the class name of the wrapper/div to the custom code within the project settings?

connor

4

Can I have that scroll animation with the “Video panel” that scrolls up once you reach the final section of the site? If yes, how can I do it?

5

CSS sticky is not possible with IX2.0

That’s done using custom code

<style>
.course-sidebar-wrapper {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 50px;
}
</style>
6

Where do I put this? Do I name the class .course-sidebar-wrapper and then embed custom code into html embed within that section? a bit lost tbh

7

You can put it anywhere on the page, page header or footer, or site header or footer.

8

I tried to add it here, but for some reason it doesn’t work… any chance you can have a quick browse as to why?

https://preview.webflow.com/preview/bizdojo-dev?preview=82236ea3b4da9f477068749a1f734adb

It’s the blog post template… thanks so much for helping out mate!

9

The element with the sticky positioning, can only “move” within the dimensions of it’s parent element.

In your case, the parent element is exactly the same height as your sticky element, hence it cannot “move”.

(I only provide hints on the forum, please do some research too)

10

Hey,

Sorry to bug with this again. I have followed the instructions and done research into relative positioning but am completely stuck.

http://bizdojo-dev.webflow.io/event/whats-the-haps-with-bizdojo-wellington

For some reason the stickiness doesn’t continue when I scroll into the section that I am wanting it to be sticky.

Any tips/hints? Thanks so much.

edit: nvm, i got it.

11

Hey I am trying to achieve the same thing and am getting hung up. Saw that you were able to figure it out! I’ve adding the code to the footer and changed the class from “.course-sidebar-wrapper” to mine which is “.sticky-side-bar-wrapper”. Did you do any other edits to the code to get it to work? This is what I put in my footer:

<style>
.sticky-side-bar-wrapper {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 50px;
}
</style>

And this is the page: https://useproof.com/webinar-registration

12

Share the webflow link and I can check it out.

The important thing is to make sure that .sticky-side-bar-wrapper is “relatively” position versus the element it sits in. Lemme check it out on your site. Took a bit, but after you get it the first time it’s a breeze.

1 Like
13

This is a helpful link that explains flex boxes which is used to create the sticky effect:

And then this to see how the Webflow interactions page was made:

https://preview.webflow.com/preview/help-site?preview=74bf04bc2857da904aa0a2d5fcfedd4d

14

I was able to figure out the sticky effect, but I’m having an issue where I want a div to stick to the bottom of another div, and it will only stick to the top. Can anyone see what I’m doing wrong here?

This is just a test page to solve the issue. I want the red bar to be sticky to the bottom of the page, until the user scrolls past the white section.

Project Link: https://preview.webflow.com/preview/nicks-stupendous-project-3b15d9?preview=2d9041366b4a0355b49b324ac834ba79

Preview Link: http://nicks-stupendous-project-3b15d9.webflow.io/

Thanks!

15

You can achieve that adding the content in the comment before and adding your class name to it, like this:

http://cloud.ipagroup.co/qLCK

The code:

<style>
  .your-class-name {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0px;
  }
</style>
16

@aaronocampo Thanks for the input. That’s what I had already. But I’m trying to get that red bar to stick to the bottom of the browser window, not the top. I changed the class to bottom: 0px, but it still sticks to the top.

17

Maybe I’m not understanding what you need :thinking:

Fixing it with the panel doesn’t work?

png
png2988×1912 380 KB

18

So when the page loads, it should look like this, with the red bar pinned to the bottom of the page

37%20PM
37%20PM2394×1566 109 KB

Then, once the user gets to the bottom of the white section, the red bar begins to scroll with the rest of the page.

56%20PM
56%20PM2396×1564 151 KB

I changed the code snippet from top: 0px to bottom: 0px but it doesn’t change anything for me. It still pins the red bar to the top of the page.