Javascript 线性渐变作为第一个全屏视图的主体背景；在那个纯色背景色之后

我的目标是从上到下逐渐从白色变为蓝色。如果我打开页面，最终的蓝色色调应该出现在屏幕的下边缘。如果我再向下滚动，最后的蓝色色调应该始终保持为纯色背景色。我怎样才能以最简单的方式做到这一点？旧的浏览器支持并不重要

此版本不起作用，因为渐变会在每个屏幕高度循环：

background: linear-gradient(0deg, blue 51%, white 100%);

您可以执行以下操作：

html{
背景：
线性梯度（0度，蓝色51%，白色）顶部/100%100vh无重复
蓝色
}