Question

我想堆叠元素，当它们进入视图时，它会添加类 .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自动添加活动类（因为它已经在视图中）

如果我是诚实的，尽管它有点有用......我不明白这个功能。

有更简单的方法吗？

Answer 1

现在代码运行方式的问题在于，通过将$('.default')传递给函数，意味着您将该类应用于所有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>

Answer 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>

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

2 个答案: