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

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.

我想要一个按钮工作,应该继续滚动。该网站是http://mkg-praxisklinik-muenchen.de/。这是左下方的绿色按钮“Termin vereinbaren”。当我滚动页面时,这应保持粘性(固定位置)。

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?

我已经尝试了所有已知的css解决方法但没有成功。有人知道javascript解决方案吗?

2 个解决方案

#1

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

使用position:fixed时,需要设置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.

我也注意到你有一个相对容器,可能不是解决固定元素的最佳方法。我会一起移除容器。

#2

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

除了position:fixed之外,您还可以使用底部CSS规则

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

有关CSS bottom property的更多信息

#1