滚动动画技能栏不起作用

Question

我正在处理我的作品集，但我被困在动画技能栏上。我正在使用 JQuery，并且我遵循了不同的教程，但没有一个在我的项目中不起作用。我已经计算了部分滚动位置和窗口滚动位置。我更改了父 div 和子 div，但结果是一样的。这是我的代码

$(document).ready(function() {
  var skillBar = $('.skill-body');
  $(window).scroll(function() {
    var SkillLocation = $("#Education-Skill").offset().top;
    var scrollLocation = $(this).scrollTop();

    skillBar.each(function() {
      if (SkillLocation <= scrollLocation) {
        $(this).find('.inner-skill-bar').animate({
          width: $(this).attr('data-percent')
        }, 2000);
      }
    });
  });
});

.outer-skill-bar {
  height: 26px;
  width: 100%;
  border: 1px solid black;
}

.inner-skill-bar {
  height: 100%;
  width: 0%;
  background: lightcoral;
  border-right: 0.5px solid rgb(146, 136, 136);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="Education-Skill">
  <div class="row">
    <div class="col-md-6 skill" id="skill">
      <div class="all-skill">

        <div class="my-skill">
          <div class="skill-head d-flex">
            <i class="fab fa-html5 fa-lg"></i>
            <p>HTML5</p>
          </div>
          <div class="skill-body d-flex" data-percent="90%">
            <div class="outer-skill-bar">
              <div class="inner-skill-bar"></div>
            </div>
            <div class="percent">
              <p class="skill-value">90%</p>
            </div>
          </div>

        </div>
        <!--my-skill-->
        <div class="my-skill">
          <div class="skill-head d-flex">
            <i class="fab fa-css3-alt fa-lg"></i>
            <p>CSS3</p>
          </div>
          <div class="skill-body d-flex" data-percent="80%">
            <div class="outer-skill-bar">
              <div class="inner-skill-bar"></div>
            </div>
            <div class="percent">
              <p class="skill-value">80%</p>
            </div>
          </div>
        </div>
        <!--my-skill-->

      </div>
      <!--all skill-->
    </div>
    <!--col-->
  </div>
  <!--row-->
</div>
<!--Container-->

Answer 1

您只需将skillPosition 变量减小一点，这样当动画出现在您的屏幕上时它就会开始播放。对于这个例子，我只使用了- 100，但你可以随意调整它：

$(document).ready(function(){
	var skillBar = $('.skill-body');
	$(window).scroll(function(){
		var SkillLocation = $("#Education-Skill").offset().top;
		var scrollLocation = $(this).scrollTop();

		skillBar.each(function(){
			if(SkillLocation - 100 <= scrollLocation)
			{
				$(this).find('.inner-skill-bar').animate({width:$(this).attr('data-percent')}, 2000);
			}
		});
	});
});

.vertical-offset {
  width: 100%;
  height: 250px;
}

.outer-skill-bar{
	height: 26px;
	width: 100%;
	border: 1px solid black;
}
.inner-skill-bar{
	height: 100%;
	width: 0%;
	background: lightcoral;
	border-right: 0.5px solid rgb(146, 136, 136);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vertical-offset">Scroll down...</div>
<div class="container" id="Education-Skill">
		<div class="row">
      <div class="col-md-6 skill" id="skill">
				<div class="all-skill">
        
            <div class="my-skill">
              <div class="skill-head d-flex">
                <i class="fab fa-html5 fa-lg"></i>
                <p>HTML5</p>
              </div>
              <div class="skill-body d-flex" data-percent="90%">
                <div class="outer-skill-bar">
                  <div class="inner-skill-bar"></div>
                </div>
                <div class="percent">
                  <p class="skill-value">90%</p>
                </div>
              </div>
              
            </div> <!--my-skill-->
            <div class="my-skill">
              <div class="skill-head d-flex">
                <i class="fab fa-css3-alt fa-lg"></i>
                <p>CSS3</p>
              </div>
              <div class="skill-body d-flex" data-percent="80%">
                <div class="outer-skill-bar">
                  <div class="inner-skill-bar"></div>
                </div>
                <div class="percent">
                  <p class="skill-value">80%</p>
                </div>
              </div>
            </div> <!--my-skill-->
            
          </div><!--all skill-->
        </div> <!--col-->
     </div> <!--row-->
</div> <!--Container-->
<div class="vertical-offset"></div>

Answer 2

不要将scroll 事件监听器用于这种东西，这对浏览器性能不利。

您应该为此使用 Intersection Observer (IO)，这是为此类问题设计的。使用 IO，您可以在 HTML 元素与另一个元素（或视口）相交时做出反应

Check this page，它向您展示了如何在元素进入视口后为其设置动画（一直向下滚动）

简要回顾一下你必须做什么：

首先你必须创建一个新的观察者：

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

在这里，我们定义一旦您的目标元素在视口中 100% 可见（阈值为 1），您的回调函数就会被执行。在这里你可以定义另一个百​​分比，0.5 意味着一旦你的元素有 50% 可见，函数就会被执行。

然后您必须定义要观看的元素，在您的情况下，这将是 counter 元素：

var target = document.querySelector('.counter');
observer.observe(target);

最后，您需要通过定义回调函数来指定元素在视口中可见后应该发生的情况：

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // here you animate the skill bar
  });
};

如果您需要支持旧版浏览器，请使用official polyfill from w3c.

如果您不想在元素再次滚动到视图中时再次触发动画，那么您可以在动画完成后can also unobserve an element。