Html 滚动过去后使两个div粘在页面顶部

我一直在尝试让两个div在用户滚动过这些div后粘贴到页面顶部。两个div位于同一高度。这是我从其他stackoverflow答案中使用的：

Html:

脚本在一个div上运行良好，但是当两次使用脚本时，它会自动将右侧div移到左侧，而这个div不会粘在页面顶部

我希望有人能帮我解决这个问题

---

编辑：在新文档中重新创建问题

因为当我们设置

位置：固定时，
div
丢失了
float
属性，它们彼此重叠。为了使它们处于其位置，我们需要对右侧
div
应用
right
距离。要修复此问题，请按如下所示替换脚本代码

<script type="text/javascript">
 function sticky_relocate() {
  var containerWidth = $(".container").outerWidth(true);
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top)
  {
    $('#blockleft').addClass('sticky');
    $('#blockright').addClass('sticky');
    $('#blockright').css("right", (containerWidth-800)/2 + "px");
    }
  else
  {
    $('#blockleft').removeClass('sticky');
    $('#blockright').removeClass('sticky');
    }
  }
 $(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
  });
</script>


函数重新定位（）{
var containerWidth=$（“.container”）.outerWidth（true）；
var window_top=$（window.scrollTop（）；
var div_top=$（'#粘性锚点'）.offset（）.top；
如果（窗口顶部>分区顶部）
{
$（'#blockleft'）.addClass（'sticky'）；
$（'#blockright'）.addClass（'sticky'）；
$（'#blockright'）.css（“right”，（containerWidth-800）/2+“px”）；
}
其他的
{
$（“#blockleft”）.removeClass（'sticky'）；
$（'#blockright'）。removeClass（'sticky'）；
}
}
$（函数（）{
$（窗口）。滚动（粘性重新定位）；
粘性_重新定位（）；
});

代码
$（'#blockright'）.css（“right”，（containerWidth-800）/2+“px”）
计算右侧
div
的右侧距离值，并在滚动时向该
div
添加css属性
right:XXXpx
。代码
var containerWidth=$（“.container”）.outerWidth（true）
获取容器的宽度
div
及其
margin
值（由于
margin
是自动生成的
auto
，我们需要确定的数字进行计算）
我在一个新文件中重新创建了这个问题，也许这个问题更容易理解。请检查原始帖子。@LittleNumber:如果这有助于您解决问题，请将此标记为答案。
body  {
 margin: 0; 
 padding: 0; 
}
#header {
 height:200px;
 background-color:#666;
}
#blockleft {
 width:100px;
 height:500px;
 margin-top:10px;
 background-color:#090;
 float:left;
}
#blockright {
 width:100px;
 height:500px;
 margin-top:10px;
 background-color:#0F3;
 float:right;
}
#content {
 width:500px;
 height:2000px;
 background-color:#0CF;
 margin:auto;
}
.container {
 width:800px;
 margin:auto;
}
.sticky {
 position: fixed;
 top: 0;
}

<script type="text/javascript">
 function sticky_relocate() {
  var containerWidth = $(".container").outerWidth(true);
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top)
  {
    $('#blockleft').addClass('sticky');
    $('#blockright').addClass('sticky');
    $('#blockright').css("right", (containerWidth-800)/2 + "px");
    }
  else
  {
    $('#blockleft').removeClass('sticky');
    $('#blockright').removeClass('sticky');
    }
  }
 $(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
  });
</script>