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

Posted 2021-05-07

我正在尝试使按钮继续运行。网站是http://mkg-praxisklinik-muenchen.de/。这是左下角的绿色按钮“ Termin vereinbaren”。当我滚动页面时，它应该保持粘性（固定位置）。

问题是，如果页面太短，则按钮根本不会显示-响应式设计也是如此。

我已经尝试了所有已知的CSS解决方法，但均未成功。有人知道javascript解决方案吗？

答案

[使用位置：固定时，您需要设置位置属性，例如上，下，左，右

在这种情况下，我所做的只是添加

bottom: 50px;

它的工作原理与您预期的一样。

此外，在使用定位时也不需要边距。

我还注意到您有一个相对的容器，可能不是固定元素的最佳方法。我会一起删除容器。

另一答案

除了bottom之外，您还可以使用position: fixed CSS规则>

a.round-button {
    position: fixed;
    bottom: -150px;
    transition: bottom ease 0.5s;
}
如果您希望在鼠标悬停时扩展按钮，可以尝试：

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

More info about CSS bottom property

另一答案

在不使用CSS属性posotion：fixed的情况下，向下滚动页面时是否可以修复聊天按钮？>