当浏览器地址栏隐藏时，防止浮动按钮在移动设备上移动答案

【问题标题】：Preventing floating button to move on mobile when browser address bar hides当浏览器地址栏隐藏时，防止浮动按钮在移动设备上移动
【发布时间】：2015-06-24 15:59:11
【问题描述】：

我正在开发一个使用 angular-material 的移动网站，该网站在许多 Google 应用程序中都使用主页上的浮动按钮。该按钮始终存在并固定在右下角。这一切都很好。但是，当我滚动页面并且浏览器地址栏隐藏时，正文高度也会发生变化。结果是按钮也向上移动。查看图片以更好地理解。

这是按钮的 CSS：

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

当我使用top 而不是margin-top 时，按钮会向上移动，一旦地址栏被隐藏，它就会向下跳。

按钮是否有可能保持固定？我宁愿不强迫地址栏隐藏或保持固定。提前致谢！

【问题讨论】：

标签： angularjs mobile angular-material

【解决方案1】：

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

}

尝试改用位置绝对规则。绝对位置使您指定的页面上的元素独立于其他元素。

【讨论】：

【解决方案2】：

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

我所拥有的是，当地址栏被触发并且 Kiko 的回答没有改变它时，FAB 会被隐藏（向下移动），所以我认为它会将我的问题带到你的代码中。

为了让它停止移动，我必须像你一样将我的 position: absolute 更改为 fixed。其余的 CSS 如下：

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

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

【讨论】：