<body>
  <div class="hide">
    <p>要素</p>
  </div>
</body>
body{
  height: 500px;
}
div{
  width: 300px;
  margin-top: 300px;
  padding: 30px 0;
  background-color: aqua;
  transition: all 0.8s linear;
}
p{
  text-align: center;
}
.hide{
  opacity: 0;
}
$(function(){
  let contents = $('div').offset().top;
  $(window).on('scroll',function(){
    if($('html,body').scrollTop() >= contents-100){
      $('div').removeClass('hide')
    }
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js