javascript - 使用 jQuery 和 CSS3 的 TranslateX() 在将父元素滚动到 View 中时显示元素

Question

我想在圆圈的父部分滚动到 View 中时更改圆圈的位置。

在父 View 出现后向下滚动时，它应该向右移动，而当向上滚动时，它应该移回原来的位置。 (向左 -200 像素)它只应在用户主动滚动时移动。

如果用户一直向下滚动到圆圈父部分的最底部，或者如果他们已经向下滚动到底部并重新加载页面，则圆圈应该出现在它完全显示的位置。

我当前的代码部分有效，但我无法根据父元素的可见程度来显示整个元素，也无法在滚动到页面后重新加载页面时将其显示在最终位置最底层。

JSFiddle:https://jsfiddle.net/thebluehorse/gu2rvnsw/

var $window = $(window),
    $sectionFour = $('.section-four'),
    $circle = $sectionFour.find('.circle'),
    lastScrollTop = 0,
    position = -200;

function revealCircle() {
  var isVisible,
  	st = $window.scrollTop();

  isVisible = isInView($sectionFour);

  if (isVisible) {
    // console.log('section four is in view, so lets do stuff!');

    if (st > lastScrollTop) {
      if (position === 0) {
        return false
      }
      $circle.css('transform', 'translateX(' + position + 'px')
      position++;
    } else {
      if (position === -200) {
        return false
      }
      $circle.css('transform', 'translateX(' + position + 'px')
      position--;
    }
  }
}

function isInView(node) {
  var rect;

  if (typeof jQuery === 'function' && node instanceof jQuery) {
    node = node[0];
  }

  rect = node.getBoundingClientRect();

  return (
    (rect.height > 0 || rect.width > 0) &&
    rect.bottom >= 0 &&
    rect.right >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.left <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

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

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

Answer 1

您的代码可以稍微简化一下。当页面滚动时，您需要跟踪的唯一值是 scrollTop()。因为 $sectionFour 的几何形状永远不会改变，所以您可以立即缓存它的 getBoundingClientRect()。

一旦您知道 $sectionFour 在 View 中，您想要计算出其总高度中有多少像素在 View 中，将其转换为百分比，然后将该百分比应用到初始值-200 的位置。本质上，当仅显示几个像素时，这是一个很小的百分比，例如 10%，-200 变为 -180。当元素完全在 View 中时，百分比应该接近 100%，并且 -200 变为 0。这意味着您没有跟踪最后的位置或滚动的方向，您只是计算值应该是多少基于当前视口(viewport) (scrollTop)。

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>