Search code examples
javascripthtmlcsssticky

page jumps when button sticks to top of the screen

I have a "Reach out to..." button. It is sticky when scrolling on mobile devices:

https://dev.truecounsellor.com.au/counsellors/227/luc-devoto

I got the button to stick but the content below it jumps right up and the transition is not smooth. Any suggestions?

Solution

  • The problem is that you are removing the button from where it normally is in the page with position: static; by setting it to position: fixed.

    You'll probably want to use 2 different buttons instead.

    BTW, you are loading bootstrap.min.js via HTTP instead of HTTPS so your users receive a "suspicious website" warning.