javascript - 响应式滚动顶部

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