javascript - 在滚动上显示每个部分的元素，jQuery

Question

我在部分内有 opacity: 0 元素。并尝试使 opacity: 1 那些部分在窗口中完全可见。我写的代码如下。它有缺陷。

$(window).scroll( function(){
    $('.parts').each(function(i){        
        var sectionBottom = $(this).position().top + $(this).outerHeight();
        var windowBottom = $(window).scrollTop() + $(window).height();            
        if( windowBottom > (sectionBottom + 300) ){
            $("h1").css("opacity", "1");
            $("h2").css("opacity", "1");
            $("h3").css("opacity", "1");
        }            
    }); 
}); 

.parts {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.part1 {
  background-color: yellow;
}
.part2 {
  background-color: red;
}
.part3 {
  background-color: blue;
}
h1,h2,h3 {
  text-align: center;
  color: #000;
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="parts part1">
  <h1>this is the el of 1</h1>
</section>
<section class="parts part2">
  <h2>this is the el of 1</h2>
</section>
<section class="parts part3">
  <h3>this is the el of 1</h3>
</section>

它会同时显示所有元素。如何使元素仅显示其在窗口中可见的部分。

Answer 1

滚动功能有一个小问题。滚动函数只是检查 windowBottom > (sectionBottom + 300)，如果为真，它只会使其他部分的所有内容都可见。

要解决滚动问题，请检查该部分在窗口中是否可见，然后使其中的元素可见(opacity: 1)。

$(window).scroll(function() {
  $('.parts').each(function(i, ele) {
    console.log(isElemIntoView(ele));
    console.log();
    if (isElemIntoView(ele)) {
      $(ele.className + " *").css("opacity", "1");
    }
  });
});


function isElemIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}