gpt4 book ai didi

javascript - 当用户滚动浏览时触发 Jquery

转载 作者:行者123 更新时间:2023-12-03 04:06:11 25 4
gpt4 key购买 nike

我想在用户第一次滚动 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com