当一个元素在视图中而不是滚动过去时，如何让jQuery航点插件触发？
当一个元素在视图中而不是滚动过去时，如何让jQuery航点插件触发？
提问于 2012-09-19 14:43:37
请查看以下内容：
因为你可以看到，只有当你滚动经过第一个红色矩形时，它才会变成蓝色，我希望它在进入视图的那一刻变成蓝色。这就是为什么第二个不会变成蓝色，因为它下面没有足够的内容让你滚动过去。
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'
});
});
});如何让它在看到有问题的元素时立即触发，而不是滚动过去？
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-09-20 16:39:27
offset选项确定相对于视口顶部的位置应触发的路点。默认情况下，它是0，因此元素在命中顶部时会触发。因为您想要的是常见的，waypoints包含一个简单的别名，用于设置在整个元素进入视图时触发的偏移量。
$('.box').waypoint(function() {
$(this).css({
borderColor: 'blue'
});
}, { offset: 'bottom-in-view' });如果你想让它在元素的任何部分从底部偷看时触发，你应该将其设置为“100%”。
Stack Overflow用户
发布于 2017-11-30 09:22:25
对我不起作用。我有几个同名的类，如果页面加载/ first元素出现在屏幕上，它们都会改变。
jQuery(document).ready(function(){
jQuery('.zoomInDownInaktiv').waypoint(function() {
//jQuery(this).removeClass('zoomInDownInaktiv');
jQuery(this).addClass('zoomInDown');
}, { offset: 'bottom-in-view' }); })；
Stack Overflow用户
发布于 2017-11-30 09:31:25
好的。找到了一个运行良好的解决方案。
jQuery('.zoomInDownInaktiv').waypoint(function(direction) {
if (direction === "down") {
jQuery(this.element).removeClass('zoomInDownInaktiv');
jQuery(this.element).addClass('zoomInDown');
}
}, { offset: '80%' });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12497122
复制相关文章
相似问题
jQuery航点插件逐个淡入元素
jquery -当元素滚动到视图中时触发ajax方法
如何使用jQuery让元素滚动到视图中？
让translateX使用视口宽度而不是元素宽度
Jquery航点粘性元素应在div底部触发
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
