我想在用户第一次滚动 div 时触发 JQuery 事件。
我尝试过使用航路点。它不起作用。这是代码，没有错误。
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
}
})
HTML 代码:
<body>
<!-- main content -->
<div id="push"></div>
<section class="grey darken-4 valign-wrapper">
<div class="container valign">
<div class="col s12">
<h2 class="center-align white-text">Hey!</h2>
<div class="divider"></div>
<p class="center-align white-text flow-text developer"></p>
</div>
</div>
</div>
</section>
<div id="main">
<div class="container" style="padding-top:8px">
<h2 class="center black-text darken-4">Profile</h2>
<h4 class="center teal-text darken-4">
I love to Code <a class="pulse btn-floating"><i class="material-icons">favorite</i></a>
</h4>
<div class="divider"></div>
<div class="row" style="padding-top:5%">
<div class="col s4">
<h4 class=" teal-text darken-4">About me</h4>
<p class="flow-text me" style="font-size:20px">
</p>
</div>
<div class="col s4">
<img src="Images/Aarth.jpg" alt="" class="circle responsive-img">
</div>
<div class="col s4">
<h4 class="teal-text darken-4" style="padding-left:11%">Details</h4>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Name:</strong>
<span class="name "></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Age:</strong>
<span class="age"></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Location:</strong>
<span class="location"></span>
</p>
</div>
</div>
</div>
</div>
</body>
这是我迄今为止使用过的方法，但没有任何效果
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
帮助会很棒!
最佳答案
要使用路径点，请记住需要有足够的滚动空间，以便“主”div 的顶部到达视口(viewport)的顶部。这将根据用户打开的浏览器窗口的大小而有所不同。您可以设置距视口(viewport)顶部的 % 偏移量，使其在元素距顶部一定距离时触发。
如果您的“main”div 是最后一个元素，您还可以使用特殊的“bottom-in-view”偏移量，使其在滚动到达页面底部后起作用，即使“main”的顶部无法到达视口(viewport)顶部:
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
},
offset: "bottom-in-view"
});
所有这些信息都可以在文档中找到。请参阅http://imakewebthings.com/waypoints/api/offset-option/了解更多详情
关于javascript - 当用户滚动浏览时触发 Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44545889/