jquery scrolling effect not working on iphone

Question

The jQuery code does not seem to work on iphone. Only the function "titleEffect" works. Other than that, nothing else shows up on my iphone screen, not on safari, not even chrome. Any thoughts????

What I found out so far is that all the "else" parts of if/else statements works.

I wanted to make the contents show up on the screen when the page is scrolled down to each content. Everything works fine in my pc, even on android. It only the iphone that is not working.

$(document).ready(function(){
	
	
	$("#welcome h3").fadeIn(4000);
	
	// deal with the page getting resized or scrolled
	window.onscroll = function() {updateEffect()};
	window.onresize = function() {updateEffect()};
 
	function updateEffect() {
		// add your code to update the position when your browser
		// is resized or scrolled
		titleEffect();
		slideUpShow("#image1 img");
		slideUpShow("#image2 img");
		slideLeftShow("#image1 div");
		slideLeftShow("#image2 div");
		slideRightShow("#social-links-div p:nth-child(1)");
		slideLeftShow("#social-links-div p:nth-child(2)");
		slideRightShow(	"#social-links-div p:nth-child(3)");
		minimizeShow(".video-div");
	}

	function titleEffect(){
		for(var x=0; x<($("#welcome").height()/3*2);x+=10){
			if(document.body.scrollTop > x || document.documentElement.scrollTop > x){
				$("#welcome h1").css('margin-top', x);
			}
		}
	}
	
	function getPosition(content){
		var x = $(content).position().top;
		return x;
	}
	
	function slideUpShow(id){
		if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5){ 
			$(id).removeClass("hide");
			$(id).addClass("show");
			$(id).addClass("slideUpIn");
		} else {
			$(id).removeClass("slideUpIn");
			$(id).removeClass("show");
			$(id).addClass("hide");
		}
	}
	
	function slideLeftShow(id){
		if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5){ 
			$(id).removeClass("hide");
			$(id).addClass("show");
			$(id).addClass("slideLeftIn");
		} else { 
			$(id).removeClass("slideLeftIn");
			$(id).removeClass("show");
			$(id).addClass("hide");
		}
	}
	
	function slideRightShow(id){
		if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5){ 
			$(id).removeClass("hide");
			$(id).addClass("show");
			$(id).addClass("slideRightIn");
		} else {
			$(id).removeClass("slideRightIn");
			$(id).removeClass("show");
			$(id).addClass("hide");
		}
	}
	
	function minimizeShow(id){
		if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5){ 
			$(id).removeClass("zoomOut");
			$(id).addClass("zoomIn");
		} else {
			$(id).removeClass("zoomIn");
			$(id).addClass("zoomOut");
		}
	}
	
});//document ready ends

Answer 1

document.documetElement.scrollTop function in Iphone does not return the current scroll.

instead of this use:

$('body').scrollTop()

in all places that are you using this method.