是否可以通过浏览器扩展添加新的CSS查询元素？

Question

我想通过新的@scroll查询向CSS添加查询元素，例如

@scroll document (top:30em) {
/* affect selectors */
   .FullHeader{
     max-height:0px;
   }
   .ScrolledHeader{
     max-height:30px;
   }
}

我希望在页面滚动时实现元素布局控制，而无需客户端编写事件处理程序。
它看起来类似于媒体查询，而是基于当前页面的左侧和顶部位置。

因此，作为一个例子，像

这样的规则

@scroll document (top 30px){
  body{padding-top:30px;}
  header{position:fixed;}
}

如果没有额外的javascript，

会修复标题并保持正文内容相对稳定。

这可以通过浏览器扩展吗？
是否有人正在研究这个问题，或者对我如何解决这个问题有所帮助？