在视口中可见正在为加载的所有内容返回可见

Question

谁能给我一些建议？我有以下代码来检测项目何时在视口中，不幸的是第一个 .each 循环（不是由滚动触发）returns 每个项目都可见，这是为什么？

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

所以我稍微修改了您的代码，并在控制台中进行了检查以查看类是否被添加和删除，并且它有效。尝试下面的代码并检查 firebug，当你滚动时，类被添加和删除视口中的任何内容：

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

在视口中可见正在为加载的所有内容返回可见

Is visible in viewport is returning visible for everything on load

javascript

jquery

scroll

visibility

viewport