Skip to main content
Participant
March 24, 2022
Answered

Is there a way to change the y-position of a sticky element while and after scrolling?

  • March 24, 2022
  • 2 replies
  • 408 views

(1) I'd like to have the sticky element move to the halfway point of the screen while scrolling, because before scrolling, the sticky element is in an unusual y-position. Also, when scrolling all the way down, the sticky element clashes with the footer, which does not look good. (2) I'd like to have the sticky element stop before crashing into the footer.

The sticky element is boxed in blue. This is what it looks like before scrolling.

While scrolling, the sticky element is not exactly at the y-midpoint of the screen. I want to be able to move it a bit upward so that it's centered.

After scrolling all the way down, part of the sticky element is buried underneath the footer. I want to be able to move it upward so that it doesn't crash into the footer.

 

Any help is appreciated. Thank you so much!

    This topic has been closed for replies.
    Correct answer Spas K.

    That workaround which Harshika mentioned only looks okay for elements with a smaller height and when the page is relatively tall. For something like your case I'm afraid it might not look very good. But there's no native support for sticky elements that change their fixed positioning, so that's pretty much all you can do right now.

    2 replies

    Spas K.
    Community Expert
    Spas K.Community ExpertCorrect answer
    Community Expert
    March 25, 2022

    That workaround which Harshika mentioned only looks okay for elements with a smaller height and when the page is relatively tall. For something like your case I'm afraid it might not look very good. But there's no native support for sticky elements that change their fixed positioning, so that's pretty much all you can do right now.

    HARSHIKA_VERMA
    Community Manager
    Community Manager
    March 24, 2022

    Hi Shoobie,

     

    Thank you for reaching out. I assume you're looking for the similar workflow mentioned here. If so, I would request you to please check the workaround suggested by our expert and let us know if that helps.

     

    Thanks,

    Harshika