Jquery Klasse hinzufügen, wenn Element in Sicht ist

Question

Ich habe diesen Code, der prüft, ob die Klasse in Sicht ist, und wenn es ist, fügt sie eine Klasse hinzu, aber aus irgendeinem Grund funktioniert es. Ich versuche, die Klassenbox nur dann aktiv hinzuzufügen, wenn die divs angezeigt werden.

Ich bin seit über einer Stunde dabei, können Sie mir sagen, was ist mit dem Code falsch?

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 

Wenn Sie es wahr machen, dann wird es nur als Logging-Fenster oder die obigen Testfälle Ausgabe ausgeführt. Position ist normalerweise Null, weshalb keine aktive Klasse hinzugefügt wird.