Javascript 当元素在视图中且未滚动过去时，如何使 jQuery 航路点插件触发？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12497122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make jQuery waypoints plugin fire when an element is in view and not scrolled past?
提问by TK123
Please see this:
请看这个：
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:
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:
CSS：
.box { width: 250px; height: 100px; border: 2px solid red; }
jQuery:
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?
如何在看到有问题的元素而不是滚动过去时立即触发它？
回答by imakewebthings
The offsetoption 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.
该offset选项确定航路点应在相对于视口顶部的哪个位置触发。默认情况下它是 0，所以你的元素在它到达顶部时会触发。因为您想要的是常见的，所以航点包含一个简单的别名，用于设置在整个元素进入视野时触发的偏移量。
$('.box').waypoint(function() {
$(this).css({
borderColor: 'blue'
});
}, { offset: 'bottom-in-view' });
If you want it to fire when any partof the element peeks in from the bottom, you should set it to '100%'.
如果您希望它在元素的任何部分从底部窥视时触发，您应该将其设置为“100%”。
回答by Paul
Won't work for me. I have serveral classes with the same name and they will all changed if the page loads / first element is on screen.
不会为我工作。我有几个同名的类，如果页面加载/第一个元素在屏幕上，它们都会改变。
jQuery(document).ready(function(){
jQuery('.zoomInDownInaktiv').waypoint(function() {
//jQuery(this).removeClass('zoomInDownInaktiv');
jQuery(this).addClass('zoomInDown');
}, { offset: 'bottom-in-view' });
});
});
回答by Paul
OK. Found a solution which works fine.
好的。找到了一个工作正常的解决方案。
jQuery('.zoomInDownInaktiv').waypoint(function(direction) {
if (direction === "down") {
jQuery(this.element).removeClass('zoomInDownInaktiv');
jQuery(this.element).addClass('zoomInDown');
}
}, { offset: '80%' });
回答by chiku
If you want to solve this issue with css then also you can do it by using below css.
如果你想用 css 解决这个问题，那么你也可以使用下面的 css 来解决。
img[data-src]::before {
content: "";
display: block;
padding-top: 70%;
}
We are trying to use pseudo-elements (e.g. ::before and ::after) to add decorations to img elements.
我们正在尝试使用伪元素（例如：::before 和 ::after）为 img 元素添加装饰。
Browsers don't render an image's pseudo-elements because img is a replaced element, meaning its layout is controlled by an external resource.
浏览器不会渲染图像的伪元素，因为 img 是一个替换元素，这意味着它的布局由外部资源控制。
However, there is an exception to that rule: If an image's src attribute is invalid, browsers will render its pseudo-elements. So, if we store the src for an image in data-src and the src is empty, then we can use a pseudo-element to set an aspect ratio:
但是，该规则有一个例外：如果图像的 src 属性无效，浏览器将呈现其伪元素。因此，如果我们将图像的 src 存储在 data-src 中并且 src 为空，那么我们可以使用伪元素来设置纵横比：
As soon as the data-src becomes the src, the browser stops rendering ::before and the image's natural aspect ratio takes over.
一旦 data-src 成为 src，浏览器就会停止渲染 ::before 并且图像的自然纵横比接管。
