以下是一个解决方案的示例代码：

HTML:

  
Div 1
  
Div 2

CSS:

#container {
  height: 500px;
  overflow-y: scroll;
  position: relative;
}

#div1, #div2 {
  height: 200px;
  width: 200px;
  background-color: gray;
  position: sticky;
  top: 0;
  margin-bottom: 20px;
}

#div2 {
  background-color: lightgray;
}

JavaScript:

const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');

window.addEventListener('scroll', function() {
  const containerTop = document.getElementById('container').getBoundingClientRect().top;
  const div2Top = div2.getBoundingClientRect().top;

  if (containerTop >= 0) {
    div1.style.top = containerTop + 'px';
  }

  if (div2Top <= 0) {
    div1.style.top = -div2Top + 'px';
  }
});

在这个示例中，我们创建了一个包含两个Div的容器。当滚动容器时，我们使用addEventListener添加了一个滚动事件监听器。在滚动事件中，我们首先获取容器和Div2的位置信息。然后，我们检查容器是否在顶部（即containerTop >= 0），如果是，则将Div1的top值设置为容器的top值。接下来，我们检查Div2是否到达顶部（即div2Top <= 0），如果是，则将Div1的top值设置为Div2距离顶部的距离的相反值（即-div2Top）。这样，当Div2到达顶部时，Div1也会移动。

请注意，在CSS中，我们将Div1和Div2的position属性设置为sticky，这样它们就会在其容器中保持固定位置。我们还将容器的overflow-y属性设置为scroll，以便在内容超过容器高度时显示滚动条。