当用户滚动到页面的另一个div或另一节时,我希望运行不同的功能。有没有办法实现这个需求?
当用户滚动到页面的另一个div或另一节时,我希望运行不同的功能。有没有办法实现这个需求?
这里已经有答案了 -->> Jquery中的动态滚动位置
有一个很棒的插件可以做到这一点,叫做WAYPOINT
HTML
<div class="first"></div>
<div class="second"></div>
CSS
.first {
background:green;
height: 600px;
width:100%;
}
.second {
background:red;
height: 600px;
width:100%;
}
JS
$('.second').waypoint(function() {
alert('You have scrolled to an entry.');
}, {
offset: '100%'
});
有很多方法可以实现这个目标,其中最简单的方法是:
var element = $('#my-div');
function myFunction() {
alert('I am here!');
}
$(window).scroll(function(){
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
myFunction();
}
});
还有 jQuery Appear插件 和 Waypoints插件:
$('#my-div').appear(function() {
alert('I am here!');
});
$('#my-div').waypoint(function() {
alert('I am here!');
});