Avatar of Al4ddin2
Al4ddin2 asked on

sticky button position

Hi,

I have a mobile form that expands and displays a considerable amount of fields.
What I would like is to display the submit button in a fixed position at the bottom of the viewport until the user scrolls down to where the button 'should be' located and then it rejoins its position in the page if you were to scroll past it.

Is this easy to do?

Thanks
jQueryJavaScript

Avatar of undefined
Last Comment
Al4ddin2

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
COBOLdinosaur

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Al4ddin2

Hi,

I think I understand what is needed, when the button is beneath the viewport then apply a class to give it a fixed position, then when it's actual position in the DOM comes back into the viewport the class is removed.
The point I am struggling with is how to determine, a) how to addClass at the correct time b) when to removeClass

Thanks
SOLUTION
COBOLdinosaur

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Al4ddin2

Thanks that looks great, so does http://www.appelsiini.net/projects/viewport even more so perhaps as I can target if it is above/below etc too.
however, for my purpose neither are working as I want to add a class to a button to say that if its location in the page is below the fold then give it a fixed position at the bottom of the screen until its actual position comes back into the viewport and then remove the class so it resumes its natural position.
Can you get this to work in my situation? as when I give it a fixed position it then appears in the viewport, passes the check and the class is removed.

Aaaargh! :-)

Thanks
COBOLdinosaur

Without seeing how the page is reacting to the events it is impossible to visualize what is happening.  You need to post the link so I can see what it is doing.

Cd&
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER
Al4ddin2

Unfortunately I don't have a link to post as it's all in sandbox at the moment. But using the links above are you able to position a div (that is someway down a long page, below the fold) fixed to the bottom of the screen until it's actual position comes into view?

I have it adding and removing classes at the appropriate times until I add a fixed position to the class I am appending.

Thanks