Ist sichtbar im Ansichtsfenster ist sichtbar für alles auf Last

Question

Kann mir jemand einen Rat geben? Ich habe den folgenden Code zu erkennen, wenn Elemente im Ansichtsfenster sind, leider die erste .each-Schleife (die nicht durch Scrollen ausgelöst wird) gibt für jedes Element sichtbar, warum ist das?

Answer 1

Also habe ich Ihren Code leicht geändert und in der Konsole überprüft, ob die Klassen hinzugefügt und entfernt werden, und es hat funktioniert. Versuchen Sie den Code unten und überprüfen Sie in der Firebug, wie Sie blättern, wird Klassen hinzugefügt und entfernt für alles, was dort im Ansichtsfenster:

$.fn.visible = function(detectPartial) { 
 
    detectPartial = (!!detectPartial); // if null or undefined, default to false 
 

 
    var viewport = $(window), 
 
    vpWidth = viewport.width(), 
 
    vpHeight = viewport.height(), 
 
    vpTop = viewport.scrollTop() + $('#navbar').outerHeight(), 
 
    vpBottom = vpTop + vpHeight, 
 
    vpLeft = viewport.scrollLeft(), 
 
    vpRight = vpLeft + vpWidth, 
 

 
    elementOffset = $(this).offset(), 
 
    elementTopArea = elementOffset.top + ((detectPartial) ? $(this).height() : 0), 
 
    elementBottomArea = elementOffset.top + ((detectPartial) ? 0 : $(this).height()), 
 
    elementLeftArea = elementOffset.left + ((detectPartial) ? $(this).width() : 0), 
 
    elementRightArea = elementOffset.left + ((detectPartial) ? 0 : $(this).width()); 
 

 
    return ((elementBottomArea <= vpBottom) && (elementTopArea >= vpTop)) && ((elementRightArea <= vpRight) && (elementLeftArea >= vpLeft)); 
 
} 
 

 
$(document).ready(function() { 
 
    addInAndOut(); 
 
    $(window).scroll(function() { 
 
    addInAndOut(); 
 
    }); 
 
}); 
 

 

 
function addInAndOut() { 
 
    $('.portfolio-image-box').each(function(i, el) { 
 
    var el = $(el); 
 
    if (el.visible(true)) { 
 
     el.removeClass("out").addClass("in"); 
 
    } else { 
 
     el.removeClass("in").addClass("out"); 
 
    } 
 
    }) 
 
}

#navbar { 
 
    border-radius: 0px; 
 
    background-color: #ffffff; 
 
    border-color: #ffffff; 
 
    margin-bottom: 0; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 1; 
 
    font-size: 1.5vh; 
 
    padding: 1.5vh; 
 
} 
 

 
#navbar .fa { 
 
    cursor: pointer; 
 
} 
 

 
body { 
 
    background-color: #fff; 
 
    padding-top: 6vh; 
 
    text-align: center; 
 
} 
 

 
.portfolio-image-box { 
 
    height: 25%; 
 
    width: 14.66vw; 
 
    margin: 1%; 
 
    background-color: #FFFFFF; 
 
    border: 1px solid #e3e3e3; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    display: inline-block; 
 
    float: left; 
 
    border-radius: 0.5vh; 
 
    cursor: pointer; 
 
} 
 

 
.portfolio-image-box:hover { 
 
    transition: 0.5s; 
 
    opacity: 0.6; 
 
} 
 

 
#portfolio { 
 
    text-align: center; 
 
    background-color: #F7F7F7; 
 
} 
 

 
#portfolio-container { 
 
    margin-bottom: 1%; 
 
} 
 

 
.portfolio-image { 
 
    height: 100%; 
 
} 
 

 
#body-title { 
 
    color: #c84630; 
 
} 
 

 
.col-md-12 { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <h1 id="body-title" class="col-md-6 col-md-offset-3">Portfolio</h1> 
 
</div> 
 
<div class="col-md-6 col-md-offset-3 portfolio"> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
    <div class="portfolio-image-box col-md-12"> 
 
    <img class="portfolio-image" src="http://via.placeholder.com/350x150"> 
 
    </div> 
 
</div>