Question

所以当用户向下滚动页面并看到元素到达页面中可见元素的那一点时，我会尝试创建一个滚动效果。

在我的页面上，我有5个元素（.highlight）实例，每个元素位于时间轴上的不同点。目前我已经设法让它在一个元素上工作（因此它同时将.active类应用于所有元素）。但是，我正在努力使用语法将它循环遍历所有元素，以便它们在可见时变为“.active”。

我认为我离我很远，这是我的js：

$(window).on('scroll', function() {
  var $elem = $('.highlight');
  var $window = $(window);

  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();
  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();
  if (elemBottom < docViewBottom) {
    $('.highlight').addClass('active');
  }
});

这可以解决元素在页面上的位置，然后在它变得可见时应用类但是它将活动类应用到所有当然，我只是没有js知识来弄清楚如何对待每个人元件。

从技术上讲，我可以重复这个函数并为每个实例使用不同的类，但是我很确定这是不好的做法。

Answer 1

~~而不是计算元素的位置，你只需使用~~

~~$(window).on('scroll', function() { if($('.highlight').is(':visible')) { $(this).addClass('active'); } });~~

*未经测试但我确定。（＆＃39;：可见＆＃39;）是可行的方法。

好的，我看到我测试了它并且它没有用，因为我认为可见的是占用页面空间的任何内容，而不是在视口中可见的任何内容。

然而，使用原始代码和ibrahim mahrir使用.each函数回复时，这应该可行。

$(window).on('scroll', function() {
    $('.highlight').each(function() {
          var $elem = $(this);
          var $window = $(window);
          var docViewTop = $window.scrollTop();
          var docViewBottom = docViewTop + $window.height();
          var elemTop = $elem.offset().top;
          var elemBottom = elemTop + $elem.height();
          if (elemBottom < docViewBottom) {
            $elem.addClass('active');
          }
    });
});

因此，对于每个.highlight，将elem指定为$（this），然后使用元素位置的原始计算。

Answer 2

您想检查元素是否包含（完全可见），而不仅仅是可见。

function isContained(elem){
    var $elem = $(elem);
    var x = $elem.offset().left;
    var y = $elem.offset().top;
    var w = $elem.width();
    var h = $elem.height();

    var $window = $(window);
    var wx = $window.scrollLeft();
    var wy = $window.scrollTop();
    var ww = $window.width();
    var wh = $window.height();

    if(x < wx || x + w > wx + ww) return false;
    if(y < wy || y + h > wy + wh) return false;
    return true;
}

$(window).on('scroll', function() {
    $('.highlight').each(function() {
        $this = $(this);
        if(isContained($this)) {
            $this.addClass('active');
        }
        // if you want to remove the class active if an element is not visible uncomment this
        /*
        else{
            $this.removeClass('active');
        }
        */
    });
});

Answer 3

以下是处理onscroll事件时要记住的好文章。问题是onscroll如果没有管理，就会多次触发指定的事件。如果你的事件中有一个循环或多个方法被触发，特别是如果你在DOM中进行更改，那么每个onscroll事件都会触发这些。请记住最小化onscroll事件触发的次数，如下文所述：http://ejohn.org/blog/learning-from-twitter/

如何在屏幕上显示“.active”类时循环使用元素？

3 个答案: