CODEWITHSUNDEEP
javascriptjquerycssjquery-mobile
Novakim
Novakim

Reputation: 47

jQuery animation blocks mobile scrolling

Heelo. I am using some jQuery and CSS in a template to animate some page elements. When i scroll down the page the elements fade in from the left and right. I have it set up so that the animation does not trigger on the mobile version. Everything works fine except i cannot scroll down the page past a certain point on my mobile device.

Here is a preview link: http://unbouncepages.com/voxel/

Here is my code:

$(document).ready(function() {

  //Every time the window is scrolled...
    $(window).scroll( function(){
      // ***Feature Section***
      // Check the location of each desired element
        $('#lp-pom-box-254').each( function(i){

            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

          //If the object is completely visible in the window, fade it it
            if( bottom_of_window > bottom_of_object ){

                $(this).animate({opacity:'1', left:'355px'},900);

            }

        }); 

    });

});

CSS: 

#lp-pom-box-254 {
    opacity:0;
    left:0;
  }

I apologize for the vague explanation, Any help is appreciated.

Upvotes: 1

Views: 162

Answers (1)

Luke
Luke

Reputation: 361

i think you should change this line: 

   var bottom_of_object = $(this).position().top + $(this).outerHeight();

to this: 

   var bottom_of_object = $(this).offset().top + $(this).outerHeight();

.position().top doesn't seem to work everywhere. Hope that will help.

Upvotes: 1

Related Questions