I have a div with a long list of update-able inputs. User can update the values as he/she scrolls through this list and when they are done inputting the values, they should scroll down to the end of the list to find the "update" button.

I want this button to be visible hovering at the bottom of the screen (as long as the user is scrolling within the div) so the user doesn't have to scroll down all the way to the end to find the button.

Please let me know if I can further explain the problem if I'm not clear.

Thank you in advance.

I have tried adding a fixed position button to the bottom of the screen, but it shows even after the <div> which looks unprofessional. Here is the code I want hovering at the bottom of the screen until I reach its original place.

<center><input  type="submit" name="submitbtn" value="Update Referral Ids">
  </center></form></div>

CodePudding user response：

Put the button inside a div with an ID like "sticky", then add the following CSS:

#sticky {padding: 2rem; background: gray; position: sticky; bottom: 0;}

CodePudding user response：

You can use the property of position :fixed; for the element to stuck at specific position even after the page is scrolled