如何使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>

编辑: 以下是一些图片

When you first see the page

When you scroll down a little

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

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)