jquery判断元素是否在可视区域范围内

$("#app").offset().top;

offset().top表示 绝对偏移值，比如说有一个很长的页面，#app这个元素 在最底下，  $("#app").offset().top就表示 #app这个元素距离页面顶端的距离，它一般是固定的，不随窗口滚动而改变。

$(window).scrollTop();

  窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离

$(window).height();

浏览器可视窗口的高度

<script type="text/javascript">

        $(document).ready(function () {

            $(window).scroll(function () {

                var a = $("#app").offset().top;

                if (a >= $(window).scrollTop() && a < ($(window).scrollTop() + $(window).height())) {

                    alert("div在可视范围");

                }

            });

        });

</script>

第一种方法：不适合扩展

$(document).ready(function(){

    $(window).scroll(function(){

      var t1=$("#a1").offset().top;

      var t2=$("#a2").offset().top;

      var t3=$("#a3").offset().top;

      var t4=$("#a4").offset().top;

      var top=$(window).scrollTop();

      var _hight=$(window).height();

      if(t1>=top&&t1<(top+_hight)){

        $("#a1 .p-img").find("img").addClass("on");

      }

      if(t2>=top&&t2<(top+_hight)){

        $("#a2 .p-img").find("img").addClass("on");

      }

      if(t3>=top&&t3<(top+_hight)){

        $("#a3 .p-img").find("img").addClass("on");

      }

      if(t4>=top&&t4<(top+_hight)){

        $("#a4 .p-img").find("img").addClass("on");

      }

    })

  })

第二种方法：

$(document).ready(function(){

var _length=$('.pro-lb').length;

var _top=$(window).scrollTop();

var _hight=$(window).height();

for(var i=0;i<_length;i++){

    var t=$('.pro-lb').eq(i).offset().top;

    if(t>=_top&&t<(_top+_hight)){

    $('.pro-lb .p-img').eq(i).find('span').css({transform:' translate(100%, 0%)'})

    }

}

$(window).scroll(function(){

var _top=$(window).scrollTop();

for(var i=0;i<_length;i++){

    var t=$('.pro-lb').eq(i).offset().top;

    if(t>=_top&&t<(_top+_hight)){

    $('.pro-lb .p-img').eq(i).find('span').css({transform:'translate(100%, 0%)'})

    }else if(t>(_top+_hight)){

    $('.pro-lb .p-img').eq(i).find('span').css({transform:' translate(0%, 0%)'})

    }

}

})

})

.p-content{position: relative;font-family: "Source Sans Pro";}

.p-top h1{font-size: 60px;font-weight: bold;color: #000000;line-height: 100px;margin:80px 0 30px 8%;}

.pro-txt{width: 52%;padding: 0 3% 0 8%;position: relative;z-index: 1;}

.pro-txt h2{margin: 50px 0 40px;}

.pro-txt h2 a{display: block;font-size: 40px;color: #4d526e;font-weight: bold;letter-spacing: -2px;}

.pro-txt span{font-size: 20px;color: #4d526e;font-weight: bold;display: block;line-height: 42px;}

.pro-txt span strong{color: #333333;font-weight: bold;}

.pro-txt i{display: block;width: 120px;height: 2px;background: #1ea78d;margin: 20px 0 10px;}

.pro-txt .txt{font-size: 18px;color: #4d526e;font-family: "思源黑体 CN";word-break: break-all;line-height: 46px;}

.p-list{margin-bottom: 60px;}

.pro-lb{padding: 70px 0 60px;}

.pro-txt .more{font-size: 22px;color: #4d526e;font-family: "Microsoft YaHei UI";font-weight: bold;margin-top: 18px;display: block;}

.pro-txt .more:hover{-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;padding-left: 10px;color: #fb624e;}

.p-img{width: 675px;min-height: 665px;overflow: hidden;position: relative;}

.p-img img{width: 100%;position: absolute;top:0;left: -100%;}

.p-img img.on{transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);-ms-transition:1.5s;-moz-transition:1.5s;-webkit-transition:1.5s;-o-transition:1s;transition:1.5s;}

<div class="p-list">

    <div class="pro-lb"  id="a1">

      <div class="wp clearfix">

          <div class="pro-txt l wow fadeInUp">

            <h2><a href="">Single-cylinder Cone Crusher</a></h2> 

            <span>Production Capacity:<strong>1-2200t/h</strong></span>

            <span>Feeding Size:<strong>120-11mm</strong></span>

            <span>Output Size:<strong>10-400mm</strong></span>

            <i></i>

            <p class="txt">Processing Materials: Pebble, calcite, granite, quartz, concrete, dolomite, bluestone, iron ore, limestone, iron ore, coal gangue, construction waste, ferrosilicon, basalt, sandstone, rocks, ore, glass, cement clinker and some metal.</p>

            <a href="" class="more">+ More</a>

            <a href="" class="quote">Get a quote</a>

          </div>

          <div class="p-img r">

            <a href="" rel="nofllow"><img src="images/pro.jpg" alt="Single-cylinder Cone Crusher" ></a>

          </div>

      </div>

    </div>

    <div class="pro-lb1" id="a2">

      <div class="wp clearfix">

        <div class="p-img l">

          <a href="" rel="nofllow"><img src="images/pro01.jpg" alt="Single-cylinder Cone Crusher"></a>

        </div>

        <div class="pro-txt r wow fadeInUp">

          <h2><a href="">Single-cylinder Cone Crusher</a></h2> 

          <span>Production Capacity:<strong>1-2200t/h</strong></span>

          <span>Feeding Size:<strong>120-11mm</strong></span>

          <span>Output Size:<strong>10-400mm</strong></span>

          <i></i>

          <p class="txt">Processing Materials: Pebble, calcite, granite, quartz, concrete, dolomite, bluestone, iron ore, limestone, iron ore, coal gangue, construction waste, ferrosilicon, basalt, sandstone, rocks, ore, glass, cement clinker and some metal.</p>

          <a href="" class="more">+ More</a>

          <a href="" class="quote">Get a quote</a>

        </div>

      </div>

    </div>

    <div class="pro-lb" id="a3">

      <div class="wp clearfix">

        <div class="pro-txt l wow fadeInUp">

          <h2><a href="">Single-cylinder Cone Crusher</a></h2> 

          <span>Production Capacity:<strong>1-2200t/h</strong></span>

          <span>Feeding Size:<strong>120-11mm</strong></span>

          <span>Output Size:<strong>10-400mm</strong></span>

          <i></i>

          <p class="txt">Processing Materials: Pebble, calcite, granite, quartz, concrete, dolomite, bluestone, iron ore, limestone, iron ore, coal gangue, construction waste, ferrosilicon, basalt, sandstone, rocks, ore, glass, cement clinker and some metal.</p>

          <a href="" class="more">+ More</a>

          <a href="" class="quote">Get a quote</a>

        </div>

        <div class="p-img r">

          <a href="" rel="nofllow"><img src="images/pro02.jpg" alt="Single-cylinder Cone Crusher"></a>

        </div>

      </div>

    </div>

    <div class="pro-lb1" id="a4">

      <div class="wp clearfix">

        <div class="p-img l">

          <a href="" rel="nofllow"><img src="images/pro03.jpg" alt="Single-cylinder Cone Crusher"></a>

        </div>

        <div class="pro-txt r wow fadeInUp">

          <h2><a href="">Single-cylinder Cone Crusher</a></h2> 

          <span>Production Capacity:<strong>1-2200t/h</strong></span>

          <span>Feeding Size:<strong>120-11mm</strong></span>

          <span>Output Size:<strong>10-400mm</strong></span>

          <i></i>

          <p class="txt">Processing Materials: Pebble, calcite, granite, quartz, concrete, dolomite, bluestone, iron ore, limestone, iron ore, coal gangue, construction waste, ferrosilicon, basalt, sandstone, rocks, ore, glass, cement clinker and some metal.</p>

          <a href="" class="more">+ More</a>

          <a href="" class="quote">Get a quote</a>

        </div>

      </div>

    </div>

  </div>