我正在尝试在滚动功能上构建滚动显示和动画效果。它在桌面上运行良好,但在iOS上不起作用。我找不到这个问题,所以我希望你能指出我的解决方案。
Codepen版本:http://codepen.io/InformisMentis/pen/peKvjw
The code
// Height of window
var windowHeight = $(window).height();
// Scroll status
var windowScrollPosTop = $(window).scrollTop();
// Height of window + scoll status
var windowScrollPosBottom = windowHeight + windowScrollPosTop;
// function with default settings
$.fn.revealOnScroll = function (animatie="fadeIn", afstand=100) {
// Height of window
windowHeight = $(window).height();
// Scroll status
windowScrollPosTop = $(window).scrollTop();
// Height of window + scoll status
windowScrollPosBottom = windowHeight + windowScrollPosTop;
// Function call
return this.each(function() {
// Get offset
var objectOffset = $(this).offset();
// Get top pos element
var objectOffsetTop = objectOffset.top;
// hide element with class hidden
if (!$(this).hasClass("hidden")) {
$(this).addClass("hidden");
}
// Add complete class so it wont loop
if (!$(this).hasClass("complete")) {
if (windowScrollPosBottom > objectOffsetTop + afstand) {
$(this).addClass("animated show complete " + animatie + " ");
}
}
});
}; // end function
$.fn.animateOnScroll = function (animatie="fadeIn", afstand=100) {
return this.each(function() {
var objectOffset = $(this).offset();
var objectOffsetTop = objectOffset.top;
if (!$(this).hasClass("complete")) {
if (windowScrollPosBottom > objectOffsetTop + afstand) {
$(this).addClass("animated complete " + animatie + " ");
}
}
});
}; // end function
// Call function on scroll with animatie.css class names
$(document).scroll(function() {
$(".placerholder3").animateOnScroll("bounce", 200);
$(".placerholder4").revealOnScroll("slideInLeft", 300);
});