检查元素是不是在视图中，如果是则添加类

Posted 2023-02-21

【中文标题】检查元素是不是在视图中，如果是则添加类

【英文标题】：Check if element is into view and add class if so检查元素是否在视图中，如果是则添加类

【发布时间】：2015-04-04 17:05:24

【问题描述】：

我想堆叠元素，当它们出现时，它会添加类 .active。我不希望类被删除，所以一旦添加它就会保留在那里。

总体思路：

如果 .default 在滚动视图中添加类 .active

因此，当您向下滚动时，它会在出现时添加类。

在查看了类似的问题后，我想出了这个： http://jsfiddle.net/x05vwb28/

$(window).scroll(function() 
    if (checkVisible($('.default'))) 
        $('.default').addClass('active');
     
);

function checkVisible( elm, eval ) 
    eval = eval || "visible";
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (eval == "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
    if (eval == "above") return ((y < (vpH + st)));

它工作了一半...当滚动时，它会将活动类添加到所有元素，而不是只添加到视图中的一个。

我希望第一个 div 自动添加 active 类（因为它已经在视图中）

老实说，尽管它很有效……但我不明白这个功能。

有更简单的方法吗？

【问题讨论】：

google***.com/questions/8774089/…中“jquery isvisible”搜索的第二个链接

不想粗鲁，但你还没有阅读我的问题。

伙计们，这与元素是否可见或隐藏无关，而与元素是否在窗口的视图区域中有关。

我有点困惑的是，如果函数中没有任何类型的 return 语句，你的编码到底是如何工作的。

那里实际上有 2 个返回，一个永远不会被调用。 @Jhecht。

【参考方案1】：

您的代码现在运行方式的问题是，通过将$('.default') 传递给函数，这意味着您将类应用于所有 div，如果 any div 是可见的，这不是你想要的。

您需要做的是过滤掉不在视图中的 div，并将类附加到视图中。

$(window).scroll(function() 
    $('.default').filter(checkVisible).addClass('active');
    // select divs then filter them based on view 
).scroll();

function checkVisible() 
    var elm = this;
    var eval = eval || "visible";
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (eval == "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
    // if (eval == "above") return ((y < (vpH + st))); you don't really need this

.default width: 500px; height: 500px; margin: 0 0 20px 0; float: left; border: 2px solid black;
.div1.active background: url('http://a1.dspnimg.com/data/l/423341110329_Qy737Vid_l.jpg');
.div2.active background: url('http://a1.dspnimg.com/data/l/509084866423_rd0gX45i_l.jpg');
.div3.active background: url('http://a1.dspnimg.com/data/l/78223608549_WRxtYYPS_l.jpg');
.div4.active background: url('http://fc05.deviantart.net/fs71/f/2010/265/b/4/pink_and_blue_clouds_500x500_by_prodigy42-d2zaii3.jpg');

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class="default div1"></div>
<div class="default div2"></div>
<div class="default div3"></div>
<div class="default div4"></div>

【参考方案2】：

这是否符合您的要求？这是一个非常快速和肮脏的解决方案，可能需要清理，但我让它工作了。或者至少，我理解你的问题的方式让它起作用了。

$(document).ready(function() 
  var vp_height = $(window).height();
  $(document).on('scroll', function() 
    scroll_height = $(document).scrollTop();
    viewport_bottom = vp_height + scroll_height;
    var visible = $('body>div').filter($filter_inview).addClass('active');
    $('body>div').not(visible).removeClass('active');
  );
);

function $filter_inview(i, el) 
  var el = $(el);
  return (el.offset().top > scroll_height && el.offset().top < viewport_bottom)

 body>div 
   height: 300px;
   width: 100%;
 
 body>div.active 
   border: 1px solid red;
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello There, Number 1</div>
<div>Hello There, Number 2</div>
<div>Hello There, Number 3</div>
<div>Hello There, Number 4</div>
<div>Hello There, Number 5</div>