手机端滚动页面到一定程度出现特效

手机端不支持监听滚动的距离（惯性滚动的距离），因此可使用下面的方式来实现：当滑动手机页面到一定程度时，实现某些特效。

思路：

• 定义一个变量记录所要滑动的最大距离
• 利用setInterval(function(){},1)。

解释为什么要使用setInterval()定时器。

• 进行实时的比较：由于手机端的不支持监听惯性滚动距离，所以我们需要实时的获取scrollTop，从而将scrollTop与所记录的滑动最大记录进行比较

具体代码

setTimeout(function(){
    var firstHeight = $('.section_one').height()
    var secondHeight = $('.section_two').height()
    var thirdHeight = $('.section_three').height()
    var fourHeight = $('.section_four').height()
    var allHeight = firstHeight + secondHeight + thirdHeight + fourHeight/3
    var timer = setInterval (function(){
        console.log('这是allHeight：' + allHeight)
        console.log('这是滚动的：' + $(window).scrollTop())
        if ($(window).scrollTop() >= allHeight) {
            clearInterval(timer)
            $('.section_five .con_img').animate({'transform': 'translateY(0%)'},600)
            $('.section_five .con_desc').animate({'transform': 'translateY(0%)'},600)
        }
    },500)
},1);