javascript - 标题 div 在水平滚动时跟随其他固定 div

Question

我尝试制作一个 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" 即使我水平滚动也是如此。

Answer 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');
  }
});

演示 fiddle : https://jsfiddle.net/Nicholas9114/w7pgckga/6/