Question

我正在编写一个脚本，当屏幕上出现不同元素时，它们会赋予一些动画。

第一步是检测它们何时出现在屏幕上。但这似乎不起作用。

我尝试过的事情：

-.visible()选择器，我很快发现它在jQuery中还有其他作用。

-不同的插件，但是我发现它们的功能超出了我的需要，因此我决定自己编写/查找内容。

-我当前的脚本（我在论坛的某个地方找到了它，并决定根据需要对其进行编辑），但是它的工作原理有点奇怪。

$.fn.isInViewport = function () {
    let elementTop = $(this).offset().top;
    let elementBottom = elementTop + $(this).outerHeight();

    let viewportTop = $(window).scrollTop();
    let viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).scroll(function () {
    if ($('.blogcard ').isInViewport()) {
        $(this).addClass("test");
        console.log('success.')
    } else {
        console.log('No success.')
    }
});

不幸的是，这似乎并没有为我的<div class='blogcard'>添加一个班级。

Answer 1

您对这个目标窗口的使用不是.blogcard元素：

$(window).scroll(function () {
    if ($('.blogcard ').isInViewport()) {
        //  Use .blogcard instead of this
        $('.blogcard').addClass('test');
        console.log('success.')
    } else {
        //  Remove class
        $('.blogcard').removeClass('test');
        console.log('No success.')
    }
});

Answer 2

请尝试使用此代码...

$(window).scroll(function () {
    if ($('.section3 ').isInViewport()) {
        $('.section3').addClass('its-now-view');
        alert('sction 3 is now in viewport');
    } else {
        $('.section3').addClass('its-now-view');
       alert('sction 3 is not in viewport');
    }
});

.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}

<html>
<head>
<title>Viewport demo</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1">
  <p>Content of section 1</p>
</div>
<div class="section section2">
  <p>Content of section 2</p>
</div>
<div class="section section3">
  <p>Content of section 3</p>
</div>
<div class="section section4">
  <p>Content of section 4</p>
</div>

</div>

</body>
</html>

Answer 3

您需要将'this'上下文放入$（window）.scroll函数中。我通过遍历元素来做到这一点，而不仅仅是检查.class isInViewport（）

$(window).scroll(function () {
   $('.blogcard').each(function(i, el){

      if ($(this).isInViewport()) {
          $(this).addClass('test');
          console.log('content block is in viewport.', $(this))
      } 
   })

});

删除该类会使周围的内容动画过多，因此我将其删除。

jQuery-检测元素是否在视口中

3 个答案: