滚动动画 - 动画堆积问题

Question

我有一个文本静态文本元素，当用户滚动超过 600 像素时会发生变化，当用户滚动超过 1400 像素时会再次发生变化

$(window).scroll(function () {
  if ($(this).scrollTop() > 600) {                    
    $('.p-circle').html('Text 1');
    $('.p-circle-s').html('Text 2');                     
  } 
});
$(window).scroll(function () {
  if ($(this).scrollTop() > 1400) { 
    $('.p-circle').html('Text 1 updated');     
    $('.p-circle-s').html('Text 2 updated');
  }
});

我怎样才能为它们制作一个基本的褪色动画，我尝试了下一个变体，但它们效果不佳（它会褪色 2 次）

if (scrollTop > 600 && scrollTop <= 1400) { 
    
  $('.p-circle').fadeOut(500, function() {
    $(this).text('Text 1').fadeIn(500);
  });
  $('.p-circle-s').fadeOut(500, function() {
    $(this).text('Text 2').fadeIn(500);
  });   
      
} else if (scrollTop > 1400 && scrollTop <= 2100) {

  $('.p-circle').fadeOut(500, function() {
    $(this).text('Text 1 updated').fadeIn(500);
  });
  $('.p-circle-s').fadeOut(500, function() {
    $(this).text('Text 2 Updated').fadeIn(500);
  }); 

}

Answer 1

我认为你在正确的轨道上，但是你在最后一点的逻辑没有测试过渡是否已经发生。大致如下：

if ($(this).scrollTop() > 600 && $(this).scrollTop() <= 1400 && $(".p-circle").text() != 'Text 1')

我想我弄错了你的价值观，但这里有一个让你走上正轨的小提琴......

https://jsfiddle.net/64mj3k7n/3/

Answer 2

更好的解决方案是创建一个函数（或类）Waypoints，使用如下：

Waypoints(window, [0, 100, 600, 1400], (wp) => {
  console.log(wp);   // {index:Int, value:Int}
});

接受三个参数：

1. scroll-watch 的 Element（或 String 选择器）
2. 一个 Array 的滚动路径点值
3. 一个回调函数

只有在滚动索引更改时才会触发回调 — 以防止每次滚动事件调用时累积。

/**
 * Waypoints
 * Trigger callbacks on a scrollY milestone 
 * @url https://stackoverflow.com/a/70520524/383904
 * @param {string|object} el String selector or Element object
 * @param {array} waypoints Array of px from lower to higher
 * @param {function} cb Callback function
 */

function Waypoints(el, waypoints = [0], cb) {
  el = (typeof el === "string") ? document.querySelector(el) : el;
  const wp = [...waypoints].reverse();
  const wpTot = wp.length;
  const getIndex = (n) => {
    const i = wp.findIndex(m => m <= n);
    return wpTot - 1 - (i < 0 ? wpTot : i);
  };
  let index = -1;
  const getTask = () => {
    const i = getIndex(el.scrollY);
    if (index === i) return; // No task to trigger
    index = i; // Update index
    const value = wp[wpTot - 1 - i]; // Get the waypoint name
    cb({ index, value }); // Trigger the callback
  };
  el.addEventListener("scroll", getTask);
  window.addEventListener("DOMContentLoaded", () => getTask);
  window.addEventListener("load", () => getTask);
  getTask();
}


/**
 * YOUR APP:
 */

const $circle1 = $('.p-circle');
const $circle2 = $('.p-circle-s');

const circle1txt = ["Text 1 scroll", "Text 1", "Text 1 updated"];
const circle2txt = ["Text 2 scroll", "Text 2", "Text 2 updated"];

Waypoints(window, [0, 600, 1400], (wp) => {
  $circle1.fadeOut(500, () => {
    $circle1.text(circle1txt[wp.index]).fadeIn(500);
  });
  $circle2.fadeOut(500, () => {
    $circle2.text(circle2txt[wp.index]).fadeIn(500);
  });
});

body { height: 3000px; } /* Just to force some scrollbars for this demo */
[class^="p-"] { position: fixed; }
.p-circle-s { top: 2rem; }

<div class="p-circle"></div>
<div class="p-circle-s"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>