使用应该具有固定位置的按钮滚动

Question

I am trying to get a button to work which should keep on scrolling. The website is http://mkg-praxisklinik-muenchen.de/ . It is the green button "Termin vereinbaren" on the bottom left side. This should stay sticky (fixed position) while I am scrolling the page.

The problem is that if the page is too short the button does not appear at all - as also on responsive designs.

I have tried all the known css workarounds without success. Does anybody know of a javascript solution?

Answer 1

When using position: fixed, you need to set a position property like top,bottom,left,right

In this case, all i did was add

bottom: 50px;

and it works like you expected it to.

Also, no need for margins when you are using positioning.

I also noticed you have a relative container, probably not the best way to go about a fixed element. I would remove the container all together.

Answer 2

You can use bottom CSS rule in addition to position: fixed

a.round-button {
    position: fixed;
    bottom: -150px;
    transition: bottom ease 0.5s;
}

And if you want the button to be expanded on mouse hover, you can try:

a.round-button:hover {
    bottom: 0px;
}

A simple demo

More info about CSS bottom property