当一个元素在视图中而不是滚动过去时，如何使jQuery waypoints插件触发？ [英] How to make jQuery waypoints plugin fire when an element is in view and not scrolled past?

问题描述

请看这个：

http://jsfiddle.net/5Zs6F / 2 /

正如你只能看到滚过第一个红色矩形时它变成蓝色，我希望它在进入的那一刻变成蓝色进入视野。这就是为什么第二个永远不会变成蓝色，因为它下面没有足够的内容允许你滚过它。

As you can see only when you scroll past the first red rectangle it turns blue, I would like it to turn blue the moment it enters into view. This is why the second never turns blue because there isn't enough content underneath it to allow you to scroll past it.

HTML：

Scoll this window pane
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="box"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="box"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

CSS：

.box { width: 250px; height: 100px; border: 2px solid red;  }

jQuery：

$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() {


    $('.box').waypoint(function() {

        $(this).css({
            borderColor: 'blue'
        });

    });


});

如果看到有问题的元素并且没有滚动过去，如何让它激活？

How to make it fire as soon as the element in question is seen and not scrolled past?

推荐答案

offset 选项确定与视口顶部相关的位置航点应该开火。默认情况下它为0，因此当元素击中顶部时会触发它。因为您想要的是常见的，所以航点包括一个简单的别名，用于在整个元素进入视图时设置偏移量。

The offset option determines where in relation to the top of the viewport the waypoint should fire. By default it is 0, so your element fires when it hits the top. Because what you want is common, waypoints includes a simple alias for setting the offset to fire when the whole element comes into view.

$('.box').waypoint(function() {
  $(this).css({
    borderColor: 'blue'
  });
}, { offset: 'bottom-in-view' });

如果你想让它在元素的任何部分时偷看从底部开始，你应该把它设置为'100％'。

If you want it to fire when any part of the element peeks in from the bottom, you should set it to '100%'.

这篇关于当一个元素在视图中而不是滚动过去时，如何使jQuery waypoints插件触发？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！