Jquery在元素处于视图中时添加类

Question

我有这个代码检查类是否在视图中，如果它是一个类，但是由于某些原因，它确实有效。我只是在视图中的div时尝试添加类框 - 活动。

我已经在这里待了一个多小时，你们能告诉我这段代码有什么问题吗？

codepen： http://codepen.io/salman15/pen/rLRZrJ

Jquery

 $(document).ready(function(){

  $('#next').click(function(){
    if ($('.in1').next('.t1').length) {

       $('.t1').animate({left:'-1000px'})
        $('.in1').removeClass('in1')
                    .next('.t1')
                    .addClass('in1');
    }
      });
      $('#next').click(function(){
    if ($('.in2').next('.t2').length) {
           $('.t2').animate({right:'-1000px'})
        $('.in2').removeClass('in2')
                    .next('.t2')
                    .addClass('in2');
        }
          });
          $('#next').click(function(){
    if ($('.in3').next('.t3').length) {
       $('.t3').animate({bottom:'-1000px'})
        $('.in3').removeClass('in3')
                    .next('.t3')
                    .addClass('in3');
      }
  });

  $('#prev').click(function(){
    if ($('.in1').prev('.t1').length) {

        $('.t1').animate({left:'-1000px'})
        $('.in1').removeClass('in1')
                    .prev('.t1')
                    .addClass('in1');

     }
  });
    $('#prev').click(function(){
    if ($('.in2').prev('.t2').length) {
        $('.t2').animate({right:'-1000px'})           
        $('.in2').removeClass('in2')
                    .prev('.t2')
                    .addClass('in2');
    }
  });
    $('#prev').click(function(){
    if ($('.in3').prev('.t3').length) {
        $('.t3').animate({bottom:'-1000px'})           
        $('.in3').removeClass('in3')
                    .prev('.t3')
                    .addClass('in3');

    }
  });

    var $animation_elements = $('.box');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
      (element_top_position <= window_bottom_position)) {
      $element.addClass('box-active');
    } else {
      $element.removeClass('box-active');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

});

CSS

html,body,section{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
  overflow:hidden;
}

#next,#prev{
  position:fixed;
  z-index:101;
}

#next{
  top:0px;
  right:0px;
}

#prev{
  left:0px;
}



.t1{
  float:left;
  height:100%;
  width:43%;
  background-color: #c92639;
      position: absolute;
    left: -1000px;
}

.t2{
    background-color: white;
      position: absolute;
    right: 0px;
    top: -1000px;
}


.t3{
    position: absolute;
    right: 0px;
    bottom: -1000px;
   background-color: #c8c8c8;

}

.out{
    -webkit-animation:forwards;
    -webkit-animation-name: out3; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation:forwards;
    animation-name: out3;
    animation-duration: 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes out3 {
      from {bottom: 0px;}
      to {bottom: -1000px;}
}

/* Standard syntax */
@keyframes t1 {
  from {left: -1000px;}
      to {left: 0px;}
}

.t2,.t3{
height: 50%;
    width: 57%;
    margin-left: auto;
    margin-right: 0px;
}

.in1{
    -webkit-animation:forwards;
    -webkit-animation-name: t1; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation:forwards;
    animation-name: t1;
    animation-duration: 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes t1 {
      from {left: -1000px;}
      to {left: 0px;}
}

/* Standard syntax */
@keyframes t1 {
  from {left: -1000px;}
      to {left: 0px;}
}
.in2{
  -webkit-animation:forwards;
    -webkit-animation-name: t2; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation:forwards;
    animation-name: t2;
    animation-duration: 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes t2 {
      from {top: -1000px;}
      to {top: 0px;}
}

/* Standard syntax */
@keyframes t2 {
      from {top: -1000px;}
      to {top: 0px;}
}
.in3{
    -webkit-animation:forwards;
    -webkit-animation-name: t3; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation:forwards;
    animation-name: t3;
    animation-duration: 4s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes t3 {
      from {bottom: -1000px;}
      to {bottom: 0px;}
}

/* Standard syntax */
@keyframes t3 {
      from {bottom: -1000px;}
      to {bottom: 0px;}
}

#logo >h1{
    color: white;
}

#logo >h3{
        width: 58%;
    margin: 0 auto;

}


.t2 >img{
    margin-top: 11%;
}

#logo{
    margin-top: 40%;
}

.t3>ul{
    display: inline-table;
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
}

.t3>ul>li{
    display: inline-table;
    width: 33%;

}

.t3>ul>li>div>img{
    width: 53%;
    margin-top: 25%;
}

#home{
    display: none !important;
}

#circle1,#circle2,#circle3{
    border-radius: 128px;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    box-shadow: 10px 10px 5px #888888;
}

#circle1{
    background: #32325f;
}

#circle2{
    background: white;
}

#circle3{
    background: #ef9d34;
}


#case{
  display:none;
  position:absolute;
  top:0px;
  height: 100%;
  width: 100%;
  z-index:99;
}

.stern1{
  background:blue;
}
.box {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, 200px, 0px);
  -webkit-transform: translate3d(0px, 200px, 0px);
  -o-transform: translate(0px, 200px);
  -ms-transform: translate(0px, 200px);
  transform: translate3d(0px, 200, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.box-active {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

HTML

<section id="cases">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="next">
  <h1>next</h1>
</div>
<div id="prev">
  <h1>prev</h1>
</div>

<!--page1-->
  <div id="tcee1" class="t1 in1">
     <div id="logo"><img src="img/cee.png" id="cee">
            <div id="underline"></div>
            <br>
            <h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br>
            <h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3>
        </div>
   </div>
    <div id="tstern1" class="t1" style="background:blue;">
    </div>
    <div id="tsky1" class="t1" style="background:black;">   
    </div>

    <div id="tcee2" class="t2 in2">
      <img src="img/ceedev.png">
    </div>
    <div id="tstern2" class="t2">
    </div>
    <div id="tsky2" class="t2">
    </div>

    <div id="tcee3" class="t3 in3">
       <ul>
            <li class="box">
                <div id="circle1">
                <img src="img/computer.png">
                </div>
                <br>
                <div id="underline"></div>
                <h2>Responsiv</h2><br>
                <p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p>
            </li>
            <li class="box">
                <div  id="circle2">
                <img src="img/g.png">
                </div>
                <br>
                <div id="underline"></div>
                <h2>SEO</h2><br>
                <p>Optimizing your website to result with high results on googles googles list</p>            
            </li>
            <li class="box">
                <div id="circle3">
                <img src="img/hand.png">
                </div>
                <br>
                <div id="underline"></div>
                <h2>Storytelling</h2><br>
                <p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p>
            </li>
        </ul>
    </div>
<!--page2-->
    <div id="tstern3" class="t3">
        <ul>
            <li class="box">
                <div id="circle1">

                </div>

            </li>
            <li class="box">
                <div id="circle2">

                </div>

            </li >
            <li class="box">
                <div id="circle3">

                </div>

            </li>
        </ul>
    </div>
<!--page3-->
    <div id="tcee3" class="t3">
        <ul>
            <li class="box">
                <div id="circle1">
                </div>

            </li>
            <li class="box">
                <div id="circle2">

                </div>           
            </li>
            <li class="box">
                <div id="circle3">
                </div>
            </li>
        </ul>
    </div>

</section>

Answer 1

console_runner-d0a557e….js:1 element_top_position: 1050
console_runner-d0a557e….js:1 window_bottom_position: 0
console_runner-d0a557e….js:1 element_bottom_position: 1200
console_runner-d0a557e….js:1 window_top_position: 0
console_runner-d0a557e….js:1 element_top_position: 1050
console_runner-d0a557e….js:1 window_bottom_position: 0
console_runner-d0a557e….js:1 element_bottom_position: 1200
console_runner-d0a557e….js:1 window_top_position: 0
console_runner-d0a557e….js:1 element_top_position: 1050
console_runner-d0a557e….js:1 window_bottom_position: 0
console_runner-d0a557e….js:1 element_bottom_position: 1200
console_runner-d0a557e….js:1 window_top_position: 0
console_runner-d0a557e….js:1 element_top_position: 1050
console_runner-d0a557e….js:1 window_bottom_position: 0

 if ((element_bottom_position >= window_top_position) &&
      (element_top_position >= window_bottom_position)) {


element_top_position >= window_bottom_position

如果你使它成为真，那​​么它只会通过记录窗口或上面的测试用例输出来执行。位置通常为零，这就是没有添加活动类的原因。