使用boostrap检查元素是否用户可见

check if element is user visible using boostrap

本文关键字:用户 是否 元素 boostrap 检查 使用      更新时间:2023-09-26

我在stackoverflow上经历了很多解决方案来检查一个元素当前是否在用户窗格中可见,但当使用bootstrap时,它们似乎都不起作用。

如果正确的jsfiddle结果屏幕足够大,可以显示正确的列,则显示'OK'警报。但如果右列位于折叠栏下方,那么当用户滚动到元素所在位置时,我不会得到任何警告。

https://jsfiddle.net/play75010/xjuj49kr/5/

这里我使用checkVisible()在stackoverflow上找到,但我已经检查了它与许多其他解决方案。

你知道吗?

function checkVisible( elm, evalType ) {
    evalType = evalType || "visible";
var vpH = $(window).height(), // Viewport Height
    st = $(window).scrollTop(), // Scroll Top
    y = $(elm).offset().top,
    elementHeight = $(elm).height();
if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
if (evalType === "above") return ((y < (vpH + st)));
}

尝试检查滚动可能是你正在寻找的:

  $(window).scroll( function() {
      update();   
      console.log('fire');
    });

小提琴