Question

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

这是html：

x-api-key

当我从顶部200px <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>滚动时，所有($(window).scrollTop() > 200)都是＆＃34;静态＆＃34;，但当我横向滚动时，我需要".headeritem"跟随{ {1}}，表示即使我横向滚动，".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');
  }
});

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

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

1 个答案: