javascript - 如果两个元素之间的距离小于 X 做 Y

Question

我正在尝试计算网站页脚和侧边栏之间的距离（它具有可变的 margin-top 属性，因为它模仿了一个固定位置的元素。）

在较小的分辨率下，侧边栏将在页脚顶部滚动​​。为了解决这个问题，我想在侧边栏距离页脚 X px 时隐藏侧边栏，然后在页脚上方滚动 X px 时再次显示它。

我已经尝试了下面的代码（它在窗口滚动函数内），但是它返回一个负数并且没有按预期工作。

        distance = sidebar.offset().top - footer.offset().top;

        console.log(distance);

        if ( distance > -500) {
            sidebar.fadeOut('fast');
        } else {
            sidebar.fadeIn('fast');
        }  

Answer 1

尝试这个。

$(window).scroll(function() {
//changed order, now you won't get negative number
distance = (footer.offset().top - footer.outerHeight() ) - sidebar.offset().top;

if( distance <= 50 ) // 50 or any distance you want
 sidebar.fadeOut(500);
else
 sidebar.fadeIn(500);

});

在里面添加了该部分，$(window).scroll()以便每次滚动时都会检查它。