浏览器地址栏隐藏时阻止浮动按钮在移动设备上移动

Question

我使用角度材料开发了一个移动网站，该网站使用主页上的浮动按钮，如许多Google应用程序中所示。按钮始终存在并固定在右下角。这一切都运作良好。但是，当我滚动页面并隐藏浏览器地址栏时，身高也会发生变化。结果是按钮也向上移动。请参阅图片以便更好地理解。

这是按钮的CSS：

.floating-button{
    position: fixed; 
    margin-top: 120%; 
    margin-left: 80%;
}

当我使用top代替margin-top时，按钮会向上移动，一旦地址栏被隐藏，它就会跳回来。

按钮是否有可能保持固定状态？我不希望强制地址栏隐藏或保持固定。提前谢谢！

Answer 1

.floating-button{
position: absolute; 
margin-top: 120%; 
margin-left: 80%;

}

请尝试使用位置绝对规则。绝对位置会在您指定的页面上保留一个元素，而与其他元素无关。

Answer 2

我知道这是一个老问题，但我带着类似的问题来到这里，结合了您的问题和我已经解决的问题。

我所知道的是，当地址栏被触发时 FAB 会被隐藏（向下移动），而 Kiko 的回答并没有改变这一点，所以我认为这会给您的代码带来我的问题。

为了让它停止移动，我不得不像你一样把我的 position: absolute 改成 fixed。 CSS 的其余部分如下：

.floating-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

我希望这对未来路过的人有所帮助。