手机地址栏丢固定位置答案

【问题标题】：Mobile Phone Address bar throwing off Fixed Position手机地址栏丢固定位置
【发布时间】：2019-04-30 23:24:39
【问题描述】：

我通过在这样的元素上创建固定位置的背景来创建视差图像：

#element:before {
    content: '';
    background: url('sample.jpg') no-repeat;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 0;
    background-position: 68% center;
    transform: translate3d(0,0,0);
}

效果很好，只是我注意到，当在手机上看到地址栏时，它实际上会偏离我固定元素的定位。有谁知道如何避免这种情况？

谢谢

【问题讨论】：

标签： html css parallax

【解决方案1】：

position: fixed 在移动浏览器中存在许多问题。不幸的是，由于这些问题，通常最好避免使用它。 Here is an article that outlines these problems in more detail.

基本上，您应该尝试改用position: absolute。

【讨论】：

【解决方案2】：

这可以通过动态改变前元素的高度来解决：

在页面上，只有一个带有 ID 的空白样式标签作为目标：

<style id="values-styles" type="text/css">

</style>

然后是JS/jQuery：

var valuesStyles = jQuery('#values-styles');

// since window resize is called when the address bar is shown or hidden
jQuery(window).resize(function() {
valuesStyles.html("#values:before { height:" + jQuery(window).height() + "px;}");
});

完美运行！

【讨论】：

【解决方案3】：

对我来说最好的解决方案我将 100vh 更改为 100%

你可以看Here is an article that best solution

【讨论】：

OP 已经在使用height: 100%;...
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
我和我一样通过同样的问题“手机地址栏摆脱固定位置”发布了这个答案，发现可以使用 100% 代替 100vh