How to get my header fixed after 300px of scroll Y ?

Tiffany H. shared this question 2 years ago
Answered

Hi everyone, I can't get a block of text or image becomes a sticky header on top of the page after 300px ie.


Thanks in advance for helping


90620a92b8a56ae33b49a4d500c6ca6f

Comments (6)

photo
1

Hi Tiffany,


These tutorials (http://www.justinmind.com/support/how...) will help with this. Just combine the conditions of the fade in tutorial with the sticky element of the second tutorial.


Best,


Danielle

photo
1

Hi - I've just tried this link but it just takes me to the Support homepage. Can you provide some fresh insight as to how this can be done please?

Thanks

photo
1

Yes - to do this now:

1) Select the element you would like to pin

2) Look to the properties panel

3) In the properties panel, look to the Position subheader

4) Click on Display Pin Position options

5) Change 'Y' to 'Pin to top'

6) The element will now be pinned to the top of the page. You can add a margin by adjusting the 'margin Y' option.

Hope this clarifies things.

photo
1

Hi Danielle - thanks for the response.

This does help (and quicker than the way I was doing it), but I meant being able to have an in-page element stick to the top of the browser when it reaches it. Is this possible?

Thanks

photo
1

Hi, did anyone ever figure out if this was possible? I am having the same issue. To clarify, I understand how to make a header pin to the top. What I am trying to do is have an element that is further down the page pin to the top once that element reaches the top of the page by scrolling, like in the gif the original poster included.

Thanks!

photo
1

Never mind I found the answer! For anyone else that lands here looking to do this, just set an event triggered by "On Scroll" and select "move" and the object that you want to pin. Then select "Pin to top." Add a condition and set it to when Window Scroll Y > (current y position of the element you want to be pinned). Then add the "Else" for this condition as the element's current position, fixed (instead of pinned), so that it will land back in it's original position when you scroll back up.

photo