我使用以下代码来检测对象何时应变为“粘性”并在其内容中保持固定。
var $window = $(window),
$stickyEl = $('#single-post-details'),
elTop = $stickyEl.offset().top;
$window.scroll(function() {
$stickyEl.toggleClass('sticky', $window.scrollTop() + 52 > elTop);
});
但是我想让这个响应。这意味着它需要首先检测它上方横幅的高度,以便它不会在错误的点触发.. Here is a fiddle with as an example.
答案 0 :(得分:3)
问题是,在调整大小时,粘性元素的顶部位置会发生变化。要解决这个问题,您不应该检查图像的高度,而是重新计算顶部位置。
此处使用.resize
事件非常有用。在回调中,只需更新全局变量:
var $window = $(window),
$stickyEl = $('#single-post-details'),
elTop = $stickyEl.offset().top;
$window.on({
resize : function(){
elTop = $stickyEl.offset().top;
$window.trigger('scroll');
},
scroll : function() {
$stickyEl.toggleClass('sticky', $window.scrollTop() + 20 > elTop);
}
});
注意: trigger('scroll')
对于防止粘性元素在展开窗口时覆盖图像非常重要。