javascript - 滚动时如何修复弹跳部分/内容？

Question

当我向下或向上滚动时，我有一个部分，我在上面使用滚动魔法，每当我滚动这个部分时，在某个点开始跳转，直到我到达 transform:translateY(0) 我想要的位置。

而且我不知道如何解决它，这是因为过渡？或者什么？

你们中有人遇到过类似的事情吗？

$(document).ready(function() {

  // Init ScrollMagic
  var controller = new ScrollMagic.Controller();

  // build a scene
  var ourScene = new ScrollMagic.Scene({
      triggerElement: '.section__students'
    })
    .setClassToggle('.section__students', 'fade-in') // add a class to section__students
    .addIndicators({
      name: 'fade scene',
      colorTrigger: 'transparent',
      indent: 200,
      colorStart: 'transparent'
    }) // this requires a plugin
    .addTo(controller);
});

.students-main {
  width: 100%;
  height: auto;
  text-align: center;
  opacity: 0;
  transform: translateY(-350px);
  transition: all 1s ease-out;
}

.section__students.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.carousel {
  position: relative;
  margin: 0 auto;
}

.carousel__button {
  position: absolute;
  top: 45%;
  transform: translateY(-45%);
  background: transparent;
  border: 0;
}

.carousel__button:focus {
  outline: 0;
}

.carousel__button--left {
  left: 3.5rem;
  z-index: 1;
}

.carousel__button--right {
  right: 3.5rem;
}

.arrow-left-students {
  font-size: 3rem;
}

.arrow-left-students:hover {
  color: $color-primary;
}

.arrow-right-students {
  font-size: 3rem;
}

.arrow-right-students:hover {
  color: $color-primary;
}

.carousel__nav {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
}

.carousel__indicator {
  border: 0;
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  background: $color-gray-dark-2;
  margin: 0 1.2rem;
}

.carousel__indicator:focus {
  outline: 0;
}

section .students-h1 {
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -140px);
}

.students-h1::after {
  content: '';
  width: 10rem;
  height: .8rem;
  background-color: $color-primary-light;
  position: absolute;
  bottom: -24rem;
  top: 70%;
  left: 50%;
  transform: translate(-50%, 30px);
  border-radius: 2rem;
}

.wrap-students {
  display: inline-block;
  justify-content: center;
  align-items: center;
  margin: 0 3rem;
  flex-direction: column;
  height: 30rem;
  width: 30rem;
  background-color: $color-grey-light-1;
  border-radius: 3rem;
}

.wrap-students:hover {
  box-shadow: -1px 3px 20px 3px $color-primary-light;
  transform: translateY(-10%);
  transition: all .5s;
}

.students {
  padding: 2.5rem 6rem;
}

.students .students-name {
  color: $color-gray-dark-2;
  padding-top: 1rem;
}

.students .students-description {
  margin-top: .5rem;
  font-style: italic;
  font-family: "lato", sans-serif;
  font-size: 1.6rem;
}

.wrap-students .students .students-img {
  border-radius: 50%;
  width: 16rem;
  height: 16rem;
  object-fit: cover;
  object-position: 50% 10%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<section class="section__students students-main">
  <div id="parallax__carousel" class="carousel">

    <button class="carousel__button carousel__button--left">
                    <i class="fas fa-chevron-left arrow-left-students"></i>
    </button>


    <h1 class="students-h1">Students</h1>

    <div class="wrap-students">
      <div class="students">
        <img class="students-img" src="/img/student1.jpg" alt="student-image">
        <h2 class="students-name">Nick Harrison</h2>
        <p class="students-description">Lorem ipsum</p>
      </div>
    </div>

    <div class="wrap-students">
      <div class="students">
        <img class="students-img" src="/img/student3.jpg" alt="student-image">
        <h2 class="students-name">Nick Harrison</h2>
        <p class="students-description">Lorem ipsum</p>
      </div>
    </div>

    <div class="wrap-students">
      <div class="students">
        <img class="students-img" src="/img/student1.jpg" alt="student-image">
        <h2 class="students-name">Nick Harrison</h2>
        <p class="students-description">Lorem ipsum</p>
      </div>
    </div>

    <div class="wrap-students">
      <div class="students">
        <img class="students-img" src="/img/student3.jpg" alt="student-image">
        <h2 class="students-name">Nick Harrison</h2>
        <p class="students-description">Lorem ipsum</p>
      </div>
    </div>

    <button class="carousel__button carousel__button--right">
                    <i class="fas fa-chevron-right arrow-right-students"></i>
                </button>

    <div class="carousel__nav">
      <button class="carousel__indicator"></button>
      <button class="carousel__indicator"></button>
      <button class="carousel__indicator"></button>
    </div>

  </div>

</section>

Answer 1

这个问题纯粹是因为你的 CSS 造成的。

当您想在悬停时转换元素位置时，您应该或最佳做法是定位元素父元素的悬停选择器。

这是工作 DEMO

.wrap-students .students {
  transition: all .5s;
}

.wrap-students:hover .students { 
  transform: translateY(-10%);
}