Translate based on element scroll position

Ask us anything How do I?
1

Hello,

I have a header element and I want it to move up (disappear from view) when I scroll down the page, and move down (reappear into view) when I scroll up the page. I tried using the “element watch scroll position” with the “on page scroll” trigger, but it only returns the final position and not the initial.

Any ideas on how to do this?

2

could you keep track of the initial position yourself? have a var start at 0 if the user scrolls down compare the var to the final position of the scroll and use this condition to show or hide the element, and then set the var to the final position of the scroll. so on next scroll its based on that

1 Like
3

That was my initial idea bur the “On page scroll” only returns the final position. If I uodate the var inside this trigger it will always show the final position.

4

can you give more details? if you have a separate var that you compare to the the final position of the page scroll you can then toggle your other var to show the header

1 Like
5

so you would have 3 vars the page scroll finalPosition the oldPageScroll position and ShowHeader. finalPosition > oldPageScrol showHeader = false else showHeader = true

6

My point is that I don’t have the initial position after the first scroll.

For example:

  1. I load the page with the var “initialPosition” and “finalPosition” equal to 0.
  2. When I scroll down the page, I trigger a workflow with the “On page scroll” trigger and inside this workflow I update the “finalPosition” to the screen-y value. Since the finalPosition will be bigger than the initialPosition, the element will disappear. (note that I cant update the initialPosition because the only value I have is the final screen-y value)
  3. When I scroll up the page, I’ll trigger the workflow again but my initialPosition is still set to zero. Therefore, the element will not reappear.
7

Why can’t you Set the initial position in step 2 to the final position so the next time you scroll the initial position is the previous final position

8

hi there,

have you tried this?