这是我无意中在论坛中看到的一个问题，觉得挺有意思，就自己做了一个方案
个人感觉有点死板，但是效果也可以实现
如果有更好的方案请大家指点一下
问题
CSS层 要求：
1、上下拉浏览器滚动条时，层的位置固定不变（即悬浮效果）。
2、左右拉浏览器滚动条，层要跟着文档流走（即不是悬浮效果）。
css部分：
<style type="text/css">#Test {position: fixed;float: left;left: 50px;top: 100px;z-index: 999;}
</style>html部分：
<div style="width: 3000px; height:30px; background-color:#ffd800;">撑宽用</div>
<div style="width: 30px; height:3000px; background-color:#00CC00;">撑高用</div><div id="Test" style="background-color:#00ffff; width: 1200px; height: 30px; ">这是效果测试层，要求：1、上下拉浏览器滚动条时，层的位置固定不变（即悬浮效果）。2、左右拉浏览器滚动条，层要跟着文档流走（即不是悬浮效果）。
</div>
解决方案
我对他的代码进行了两个地方的修改
1.将position属性改为sticky；
2.将效果测试层div放置最上面；
下面是代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">#Test {position: sticky;left: 50px;top: 100px;z-index: 999;}</style>
</head>
<body><div id="Test" style="background-color:#00ffff; width: 1200px; height: 30px; ">这是效果测试层，要求：1、上下拉浏览器滚动条时，层的位置固定不变（即悬浮效果）。2、左右拉浏览器滚动条，层要跟着文档流走（即不是悬浮效果）。</div><div style="width: 3000px; height:30px; background-color:#ffd800;">撑宽用</div> <div style="width: 30px; height:3000px; background-color:#00CC00;">撑高用</div>
</body>
</html>
代码效果就可以实现上下滑动浏览器滚动条时，效果div悬浮，保持不动；左右拉浏览器滚动条时，效果div随文档进行移动。
其他
但是在检查页面的时候我又发现一个问题，left：50px 的时候，拖动左右滚动条，浏览器会先走50px的距离，测试层保持不动；走完50px的时候，测试层才会随之移动。
我把left设为0，发现没有这种问题了，测试层和浏览器同步移动。但是样式可能不太美观，希望有小伙伴能够提出解决办法。