标题 div 在水平滚动时跟随其他固定 div答案

【问题标题】：Header div follow other fixed div on scroll horizontal标题 div 在水平滚动时跟随其他固定 div
【发布时间】：2017-11-27 14:17:38
【问题描述】：

我尝试制作一个 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 ($(window).scrollTop() > 200) 滚动时，所有 ".headeritem" 都是“静态的”，但是当我水平滚动时，我需要 ".headeritem" 跟随 ".bodyitem"，这意味着 ".headeritem" 始终在".bodyitem" 上，即使我水平滚动。

【问题讨论】：

你有我们可以看到的工作示例吗？
不，我不...我尝试了很多方法，没有任何效果
告诉我们做了什么
您希望“item”元素水平或垂直排列？至少，张贴一张图片或什么的..

标签： javascript jquery html css frontend

【解决方案1】：

我想这就是你要找的东西：

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>

CSS：

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;
}

JS：

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

小提琴演示： https://jsfiddle.net/Nicholas9114/w7pgckga/6/

【讨论】：