点击导航链接切换内容后，滚动渐显函数未触发需滚动1px才显示图片的修复咨询

• 原有滚动淡入逻辑的触发覆盖不全：仅绑定两类触发源——页面加载完成后的首次元素可见性计算、window.scroll事件触发的重新计算
• 导航点击切换主体内容后，既没有主动重新计算DOM中所有.fade元素的透明度状态，也没有触发滚动事件激活计算流程
• 新插入DOM的图片类.fade元素，默认继承CSS初始opacity: 0状态，没有被可见性逻辑捕获判定，因此必须等一次滚动动作触发计算后，才会被调整为可见状态，也就是「必须滚动1像素才显示」现象的来源

1. 修复切内容后图片不显示的异常 #

• 在导航点击完成、目标板块内容完全渲染到DOM的回调流程中，主动调用一次原有fade(false)方法，不需要等待用户滚动触发
  参考适配后的代码写法：

  $(window).on("load",function() {
    // 原有fade函数保持不变
    function fade(pageLoad) {
      var windowTop=$(window).scrollTop(), windowBottom=windowTop+$(window).innerHeight();
      var min=0, max=1, threshold=0.01;
      
      $(".fade").each(function() {
        var objectHeight=$(this).outerHeight(), objectTop=$(this).offset().top, objectBottom=$(this).offset().top+objectHeight;
        if (objectTop < windowTop) {
          if (objectBottom > windowTop) {$(this).fadeTo(0,min+((max-min)*((objectBottom-windowTop)/objectHeight)));}
          else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
        } else if (objectBottom > windowBottom) {
          if (objectTop < windowBottom) {$(this).fadeTo(0,min+((max-min)*((windowBottom-objectTop)/objectHeight)));}
          else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
        } else if ($(this).css("opacity")<=max-threshold || pageLoad) {$(this).fadeTo(0,max);}
      });
    } 
  
    // 首次加载完成的fade计算保持不变
    fade(true); 
    $(window).scroll(function(){fade(false);});
  
    // 新增：绑定导航点击的切换逻辑，放在load回调内部保证可以访问fade函数
    $('.nav-link').on('click', function(e) {
      e.preventDefault();
      // 原有切换页面内容的逻辑：隐藏旧板块、展示新板块
      const targetSection = $($(this).attr('href'));
      targetSection.siblings().hide();
      targetSection.show();
      // 关键：主动触发一次可见性计算，让新插入的.fade元素立刻匹配当前视口状态调整透明度
      fade(false);
    })
  });
  

• 补充适配细节：如果新板块包含未加载完成的图片，需要监听板块内所有图片的load事件，全部加载完成后再补调用一次fade(false)，避免因为图片高度未撑开，导致元素位置计算偏差、透明度判定错误
• 易踩坑提醒：
  • 不要把导航点击的逻辑放到load回调的外部，否则会因为作用域限制报fade is not defined错误
  • 不要直接将所有.fade元素强制设为opacity: 1，这会破坏原有滚动时元素随视口位置渐隐的交互效果

2. 实现「页面完全滚动至顶部后再展示切换内容」的交互 #

• 调整导航点击后的执行顺序，不要切完内容再滚动，改为先滚动回顶，再切换内容：
  1. 点击导航后，先执行平滑滚动到顶部的操作：window.scrollTo({ top: 0, behavior: 'smooth' })
  2. 增加滚动停止判定逻辑：通过200ms防抖判断，当滚动事件连续200ms没有触发、且当前滚动位置scrollY === 0时，再执行主体内容的DOM切换操作
  3. 内容切换完成后，再次主动调用fade(false)，新页面内的元素直接按当前视口状态计算透明度，刚加载完成也不会出现空白
• 效果上既保留了平滑滚动回顶的流畅感，也不会出现滚动未结束就切换内容的突兀跳变，新页面展示时所有元素直接匹配透明度状态，不需要用户额外滚动触发

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