如何实现Nest Thermostat同款滚动效果且不使用fixed固定定位

我在查阅了数百份参考资料后，希望实现类似Nest Thermostat的滚动联动效果。目前找到的参考方案存在布局限制：父容器使用了fixed固定定位，无法在我的现有网站布局中使用。

现有参考代码 #

JavaScript 逻辑 #

window.addEventListener( 'load', function() {
  var box = document.getElementById('box'),
      docHeight = document.documentElement.offsetHeight;
  
  window.addEventListener( 'scroll', function() {
        // normalize scroll position as percentage
    var scrolled = window.scrollY / ( docHeight - window.innerHeight ),
        transformValue = 'scale('+scrolled+')';

    box.style.WebkitTransform = transformValue;
    box.style.MozTransform = transformValue;
    box.style.OTransform = transformValue;
    box.style.transform = transformValue;
    
  }, false);
  
}, false);

样式代码 #

body {
  height: 2000px;
}

#container {
  width: 200px;
  height: 200px;
  border: 2px solid;
  position: fixed;
}

#box {
  width: 100%;
  height: 100%;
  background: red;
}

结构代码 #

<div id="container"><div id="box"></div></div>

需求说明 #

希望获得适配非fixed定位场景的修改方案，也欢迎推荐相关优质参考资料或可用的现成插件，提前感谢各位的解答。

内容的提问来源于stack exchange，提问作者WP Learner