实现滚动时元素逐个淡入的jQuery效果技术咨询

先梳理下你代码里的关键问题，再一步步帮你修复和优化：

1. 先修复脚本加载顺序问题 #

你的HTML里先加载了portfolio.js，之后才加载jQuery，这会直接导致$ is not defined的错误！必须把jQuery放在自定义脚本之前，调整后的顺序如下：

<!-- 优先加载依赖库 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-transition/1.1.1/d3-transition.js"></script>
<!-- 最后加载自定义脚本 -->
<script src="portfolio.js"></script>

（注意你原来重复加载了两次portfolio.js，删掉其中一次即可）

2. 补充必要的CSS过渡样式 #

淡入效果需要CSS配合才能生效，在你的portfolio.css里添加以下样式：

.fadeIn {
  /* 初始状态：透明+轻微下移，添加过渡动画 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.fadeIn.visible {
  /* 可见状态：完全不透明+回到原位置 */
  opacity: 1;
  transform: translateY(0);
}

3. 优化jQuery滚动逻辑 #

原代码存在滚动触发过于频繁、位置判断不准确等问题，这里给你优化后的版本：

// 节流函数：减少滚动事件触发频率，避免页面卡顿
function throttle(func, delay) {
  let lastTriggerTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTriggerTime >= delay) {
      lastTriggerTime = now;
      func.apply(this, args);
    }
  };
}

// 检查元素是否进入视口的核心函数
function checkFadeElements() {
  const pageTop = $(document).scrollTop();
  const pageBottom = pageTop + $(window).height();
  // 缓存元素，避免重复查询DOM
  const $fadeElements = $(".fadeIn");
  
  $fadeElements.each(function() {
    const $element = $(this);
    // 用offset().top获取元素相对于文档的顶部位置，比position()更准确
    const elementTop = $element.offset().top;
    const elementBottom = elementTop + $element.height();
    
    // 当元素部分进入视口时添加可见类
    if (elementBottom > pageTop && elementTop < pageBottom) {
      $element.addClass("visible");
    } else {
      // 可选：如果需要元素移出视口后重新隐藏，保留这行；否则可删除
      $element.removeClass("visible");
    }
  });
}

// 页面加载完成后先执行一次检查，确保初始在视口内的元素正常显示
$(document).ready(function() {
  checkFadeElements();
  // 给滚动事件添加节流，每100ms触发一次
  $(document).on("scroll", throttle(checkFadeElements, 100));
});

关键改进说明 #

• 节流函数：滚动事件会高频触发，用节流限制触发频率，大幅提升页面性能。
• offset().top：相对于整个文档的位置，避免父级定位导致的位置判断偏差。
• 初始检查：页面加载时直接执行一次检查，不需要用户滚动就能显示视口内的元素。
• DOM缓存：把$(".fadeIn")缓存起来，避免每次滚动都重复查询DOM。

调整后，滚动淡入效果就能正常工作，而且动画更流畅、性能更优。

内容的提问来源于stack exchange，提问作者DevB1