全高英雄背景图像在移动滚动上调整大小

Question

我遇到了一个问题，当用户在移动设备上滚动时，由于 URL 栏，我为全高英雄设置的背景图像正在改变大小。 当用户滚动时，这会导致图像捕捉到新的大小，从而产生不和谐的效果。 这似乎是使用100vh时的常见问题，因此我尝试了多种解决方法，包括使用 js 在页面加载时获取 window 大小和手动设置英雄的高度。 我在下面有一个使用 Bulma 的示例，它使用100vh作为其is-fullheight fullheight 英雄。

代码： https://codepen.io/Stetzon/pen/JjdQmzN

演示： https://cdpn.io/Stetzon/debug/JjdQmzN/RBMOJXzxwDbk （必须在手机上才能看到效果）

Answer 1

这是我需要为我的项目做的js。

当 url 条可见时，它会为您提供屏幕的视口高度。

var height = Math.min(document.documentElement.clientHeight, window.innerHeight || 0);