如何使2个元素上的框阴影变暗但使1个元素位置变粘？

如何解决如何使2个元素上的框阴影变暗但使1个元素位置变粘？

我想在2个元素上放置一个 Box-Shadow，在下面的示例中是文本“ qwerewqrwqrewqrer”和“ fdsafdasfdsafdsafas”，但我希望“ fdsafdasfdsafdsafas”具有粘性的位置。以下代码的问题在于，位置粘滞仅相对于Box shadow div容器而言，意味着相对于页面而言不会粘滞。是否可以使页面相对于页面发粘而不是发粘？

我所拥有的示例代码：

<!DOCTYPE html>
<html >
<head>
<style type="text/css">

#tableShadow {
  height:80vh;
  Box-shadow: 0px 0px 10px #888888;
}

#sticky {
  position: sticky;
  top: 0;
  z-index: 3;
}

body {
  min-height:200vh;
}

</style>
</head>
<body>
  <div id=tableShadow>
     qwerewqrwqrewqrer
     <div id=sticky>
        fdsafdasfdsafdsafas
     </div>
  </div>
</body>
</html>

编辑：以下是一些图片

显然，当您滚动到页面底部时，它只是一个纯白色的页面。