如果两个元素之间的距离小于X你Ÿ

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()里面增加了那个部分，这样每次滚动时都会检查它。