Is visible in viewport is returning visible for everything on load

Question

Can anyone offer me some advice? I have the following code to detect when items are in the viewport, unfortunately the first .each loop (which isn't triggered by scrolling) returns visible for every item, why is this?

window.onload = function(){

  $.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(),
        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));
  }

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

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

}

Answer 1

So I modified your code slightly and did a check in the console to see if the classes are getting added and removed, and it worked. Try the below code and check in the firebug, as you scroll, classes gets added and removed for whatever in there in the viewport:

$.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>