如果两个元素之间的距离小于 X，则执行 Y

if distance between two elements is less than X do Y

本文关键字：小于 距离 执行 之间 元素 两个 如果      更新时间：2023-09-26

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

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

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

        distance = sidebar.offset().top - footer.offset().top;
        console.log(distance);
        if ( distance > -500) {
            sidebar.fadeOut('fast');
        } else {
            sidebar.fadeIn('fast');
        }

试试这个。

$(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()中添加了该部分，以便每次滚动时都会对其进行检查。

相关文章：