如何仅当用户滚动时才将一个布局滚动到另一个布局之上

<div id="layout1">
  <!-- 内容区域1的内容 -->
</div>

<div id="layout2">
  <!-- 内容区域2的内容 -->
</div>

#layout1, #layout2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#layout1 {
  z-index: 1; /* 布局1在上层 */
}

#layout2 {
  z-index: 0; /* 布局2在下层 */
  display: none; /* 初始时隐藏布局2 */
}

window.addEventListener('scroll', function() {
  var scrollPosition = window.pageYOffset;
  var threshold = 500; // 滚动阈值，根据需求调整

  if (scrollPosition > threshold) {
    document.getElementById('layout1').style.display = 'none';
    document.getElementById('layout2').style.display = 'block';
  } else {
    document.getElementById('layout1').style.display = 'block';
    document.getElementById('layout2').style.display = 'none';
  }
});