Javascript 标题div跟随水平滚动上的其他固定div

我曾尝试制作一个jQuery脚本，使一个div跟随另一个固定div。但我没有成功

以下是html：

<div class="masterholder">
 <div class="item">
  <div class="headeritem"></div>
  <div class="bodyitem"></div>
 </div>

 <div class="item">
  <div class="headeritem"></div>
  <div class="bodyitem"></div>
 </div>

 <div class="item">
  <div class="headeritem"></div>
  <div class="bodyitem"></div>
 </div>
</div>

---

当我从顶部滚动200px

（$（窗口）.scrollTop（）>200）

时，所有的

.headeritem

都是“静态”的，但当我水平滚动时，我需要

“.headeritem”

跟随

”。bodyitem“

，意味着

”。headeritem

总是在

.bodyitem上方

即使我水平滚动。

我想这就是你想要的：

HTML:

JS:

小提琴示范：

---

您有我们可以看到的工作示例吗？没有，我没有。。。我尝试了许多方法，但没有任何工作可以告诉我们，您希望“item”元素水平或垂直排序吗？至少，张贴一张照片或其他东西。。

 <div class="masterholder">
 <div class="item">
  <div class="headeritem"></div>
  <div class="bodyitem"></div>
 </div>

 <div class="item">
  <div class="headeritem"></div>
  <div class="bodyitem"></div>
 </div>

body {
  width: 6000px;
  height: 1550px;;
}

.masterholder {
  width: 3000px;
  height: 700px;
  border: 1px solid black;
}

.headeritem {
  position:fixed;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.bodyitem {
  width: 150px;
  height: 100px;
  border: 1px solid green;
}

.sticky {
  position: fixed;
}

    $(window).scroll(function(){
    if($(document).scrollLeft() > 200) {
    $('.bodyitem').addClass('sticky');
  } else {
    $('.bodyitem').removeClass('sticky');
  }
});