我正在使用一个名为Feedify的插件,它会创建粘性部分标题(如iOS,Instagram等),然后被下一个标题所覆盖。像这样:
https://jsfiddle.net/6royb1ec/3/
但是,我无法偏移标头,以便以下标头保留与第一个标头相同的偏移量。
这是HTML
<div class="container feedify">
<div class="feedify-item">
<h3 class="feedify-item-header"><span>Header</span></h3>
<div class="feedify-item-body">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
</div>
</div>
<div class="feedify-item">
<h3 class="feedify-item-header"><span>Header 2</span></h3>
<div class="feedify-item-body">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
</div>
</div>
<div class="feedify-item">
<h3 class="feedify-item-header"><span>Header 3</span></h3>
<div class="feedify-item-body">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
<img src="http://placekitten.com/1600/900">
</div>
</div>
</div>
JS:
/* Feedify v1.0.1 by Sarah Dayan | http://demos.sarahdayan.com/feedify */ ! function(e) {
e.fn.feedify = function() {
var i = this;
e(window).bind("scroll touchmove", function(d) {
i.children(".feedify-item").each(function() {
var d = e(this),
t = i.width(),
s = e(this).height(),
h = e(this).children(".feedify-item-header").outerHeight(),
f = d.offset(),
o = f.top - e(window).scrollTop(),
c = "-" + (s - h);
o > c && 0 > o ? (e(this).addClass("fixed").removeClass("bottom").children(".feedify-item-header").css("width", t), e(this).children(".feedify-item-body").css("paddingTop", h), e(this).children(".feedify-item-header").css("width", t)) : c >= o ? (e(this).removeClass("fixed").addClass("bottom"), e(this).children(".feedify-item-body").css("paddingTop", h), e(this).children(".feedify-item-header").css("width", t)) : (e(this).removeClass("fixed").removeClass("bottom").children(".feedify-item-header").css("width", "auto"), e(this).children(".feedify-item-body").css("paddingTop", "0"), e(this).children(".feedify-item-header").css("width", "auto"))
})
})
}
}(jQuery);
$(function() {
$('.feedify').feedify();
});
CSS:
.container {
width: 50%;
float: right;
top: 5vw;
position: relative;
}
.container img {
width: 100%;
height: auto;
margin: 0 0 20px 0;
}
h3.feedify-item-header {
padding: 0px;
background: lightyellow;
margin: 0;
width: 15vw !important;
margin-left: -16vw;
float: left;
}
.feedify .feedify-item {
position: relative;
}
.feedify .feedify-item .feedify-item-header {
z-index: 100;
}
.feedify .feedify-item.fixed .feedify-item-header {
position: fixed;
top: 0;
}
.feedify .feedify-item.bottom .feedify-item-header {
position: absolute;
bottom: 0;
}
如何让插件运行,以便它对窗口顶部而不是窗口顶部的偏移量做出反应?
感谢任何帮助,谢谢。