我正在制作一个单页网站，我希望每个 div 的操作仅在所述 div 在屏幕上时才起作用。
var fixed = false;
var topdivgrad = $('#cont2').offset().top - 200;
var topdivexp = $('#cont3').offset().top - 200;
$.fn.slideLeft = function () {
return $(this).animate({
"margin-left": "0px"
}, 700);
}
$.fn.rollUp = function () {
return $(this).switchClass("hide-image", "show-image", 700, "easeInOutQuad");
}
$(document).ready(function () {
$('#fade_object').animate({
'margin-top': '8%'
}, {
duration: 1000
});
$('#fade_object').animate({
'margin-top': '3%'
}, {
duration: 200
});
});
$(document).scroll(function () {
if ($(this).scrollTop() >= topdivgrad && $(this).scrollTop() < topdivexp) {
if (!fixed) {
fixed = true;
$(".title").slideLeft();
$("div.image").rollUp();
}
}
if ($(this).scrollTop() >= topdivexp) {
if (!fixed) {
fixed = true;
$('#popup_object1').delay('500').animate({
'width': '+=40',
'height': '+=40',
'margin-left': '-=20',
'margin-top': '-=20'
}, 500, function () {
$('#popup_object1').animate({
'width': '-=10',
'height': '-=10',
'margin-left': '+=5',
'margin-top': '+=5'
}, 200, function () {
$('#year1').children("h1").animate({
'margin-top': '-=50',
'height': '+=50'
}, function () {
$('#year1').children("p").show();
});
});
});
$('html, body').animate({
scrollTop: topdivexp + 200
}, 'slow');
}
}
});
不幸的是，这只适用于第二个 div；如果我在显示时刷新屏幕，它也适用于第三个 div。
最佳答案
既然您已经在使用 jQuery，我推荐这个非常小的插件:http://www.appelsiini.net/download/jquery.viewport.js
然后你可以使用这个选择器:$('div1:in-viewport')
关于javascript - 在屏幕上显示每个 div 的 jquery 效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25127678/