我尝试制作一个 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"
即使我水平滚动也是如此。
最佳答案
我想这就是您要找的:
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/
关于javascript - 标题 div 在水平滚动时跟随其他固定 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44730951/