响应式scrolltop

Question

我使用以下代码来检测对象何时应变为“粘性”并在其内容中保持固定。

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.

Answer 1

问题是，在调整大小时，粘性元素的顶部位置会发生变化。要解决这个问题，您不应该检查图像的高度，而是重新计算顶部位置。

此处使用.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')对于防止粘性元素在展开窗口时覆盖图像非常重要。

Fiddle