Question

Heelo。我在模板中使用一些jQuery和CSS来动画一些页面元素。当我向下滚动页面时，元素从左侧和右侧淡入。我设置它，以便动画不会在移动版本上触发。一切正常，但我无法向下滚动页面超过移动设备上的某个点。

这是我的代码：

$(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;
  }

我为模糊的解释道歉，任何帮助表示赞赏。

Answer 1

我认为你应该改变这一行：

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

到此：

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

.position（）。top似乎无处不在。希望这会有所帮助。

jQuery动画阻止移动滚动

1 个答案: