如何创建与页面内容一起滚动的粘滞标题(沿x轴滚动)和侧栏(沿y轴滚动)？

<div class="container">
  <div class="header">粘滞标题</div>
  <div class="sidebar">侧栏内容</div>
  <div class="content">页面内容</div>
</div>

.container {
  height: 100vh; /* 设置容器高度为视口高度 */
  display: flex; /* 使用弹性布局 */
}

.header {
  width: 100%; /* 设置标题宽度为100% */
  position: sticky; /* 设置标题为粘滞定位 */
  top: 0; /* 将标题固定在顶部 */
  background-color: #f1f1f1; /* 设置标题背景颜色 */
}

.sidebar {
  height: 100%; /* 设置侧栏高度为100% */
  overflow-y: auto; /* 添加垂直滚动条 */
}

.content {
  flex: 1; /* 设置内容占据剩余空间 */
  overflow: auto; /* 添加滚动条 */
}

window.addEventListener('scroll', function() {
  var header = document.querySelector('.header');
  var sidebar = document.querySelector('.sidebar');
  
  header.style.transform = 'translateX(' + window.scrollX + 'px)';
  sidebar.style.transform = 'translateY(' + window.scrollY + 'px)';
});