问在将父元素滚动到视图中时，使用jQuery和css3的TranslateX()显示元素

EN

var $window = $(window),
  $sectionFour = $('.section-four'),
  $circle = $sectionFour.find('.circle');
  rect = $sectionFour[0].getBoundingClientRect();

function revealCircle() {
  var scrollTop = $window.scrollTop();
  var windowHeight = $window[0].innerHeight;

  if (scrollTop + windowHeight > rect.top) {    
    var percentVisible = (scrollTop - (rect.top - windowHeight)) / rect.height;
    var position = 200 - (percentVisible * 200);
    
    $circle.css('transform', 'translateX(-' + position + 'px');
  }
}

$window.on('scroll', revealCircle);

body { margin:0;}

.circle {
  width: 400px;
  height: 400px;
  background: #fff;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;
  transform: translateX(-200px); }

.section {
  min-height: 400px; }
  .section-one {
    background-color: red; }
  .section-two {
    background-color: orange; }
  .section-three {
    background-color: yellow; }
  .section-four {
    background-color: green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section section-one"></section>
<section class="section section-two"></section>
<section class="section section-three"></section>
<section class="section section-four">
  <div class="circle"></div>
</section>

const sectFour  = document.querySelector('#section-four')
    , divCircle = sectFour.querySelector('.circle')


function percentVisible(elm)
  {
  let rect       = elm.getBoundingClientRect()
    , viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight)
    , visu       = viewHeight-rect.top

  return (visu<0) ? -1 : Math.min( 100, (visu/rect.height*100))
  // return !(rect.bottom < 0 || rect.top - viewHeight >= 0)  =>  checkVisible
  }

window.onscroll=_=>
  {
  let circlePos = percentVisible(sectFour) *2

  if (circlePos>=0)
    {
    divCircle.style.setProperty('--circle-pos', `-${200-circlePos}px`)
    // IE 11 : // divCircle.style=('transform:translateX(-'+(200-circlePos)+'px')
    }
  }

* { margin: 0 }

.circle {
  --circle-pos         :-200px;
  width                : 400px;
  height               : 400px;
  background-color     : #fff;
  -webkit-border-radius: 200px;
     -moz-border-radius: 200px;
          border-radius: 200px;
  transform            : translateX(var(--circle-pos));
  /* IE 11 ........... : translateX(-200px); */
}

section { min-height: 400px;  }
section:nth-of-type(1) { background-color: red;    }
section:nth-of-type(2) { background-color: orange; }
section:nth-of-type(3) { background-color: yellow; }
section:nth-of-type(4) { background-color: green;  }

<section></section>
<section></section>
<section></section>
<section id="section-four"> <div class="circle"></div> </section>

let options = {
  root: document.querySelectorAll('.section-four'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

let targets = document.querySelectorAll('.section-four');
targets.forEach(target => {
  observer.observe(target) } 
)

let callback = (entries, observer) => { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element
    // here you can do something like $(entry.target).find('circle') to get your circle
  });
};