page jumps when button sticks to top of the screen

Question

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?

Answer 1

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.