基于代码块视窗位置的R Markdown图片滚动淡入淡出技术问询

我来帮你完善这个滚动触发的图片淡入淡出效果！你的现有代码只处理了代码块滚出视口上边缘时的淡出逻辑，我们需要补充代码块进入视口时的淡入判断，同时优化逻辑让两种状态都能精准触发。

修改后的JavaScript代码 #

// 防抖函数优化滚动事件性能（可选但推荐）
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

// 滚动事件处理逻辑
$(window).scroll(debounce(function() { 
  // 设置：淡入/淡出的触发阈值（占视口高度的比例）
  const fadeThreshold = 0.2;
  const $w = $(window);
  const vh = $w.height();
  const scrollTop = $w.scrollTop();

  $('.prefade').each(function() {
    const $prefade = $(this);
    // 获取当前代码块的位置信息
    const elementTop = $prefade.offset().top;
    const elementHeight = $prefade.outerHeight();
    const elementBottom = elementTop + elementHeight;
    
    // 获取对应的图片容器
    const $fadeImg = $prefade.next('.fade');
    if (!$fadeImg.length) return;

    // 计算元素在视口中的可见状态
    // 1. 元素完全在视口下方：完全隐藏
    if (elementTop > scrollTop + vh) {
      $fadeImg.css('opacity', 0);
    } 
    // 2. 元素进入视口（底部进入到顶部完全进入）：淡入
    else if (elementBottom > scrollTop + vh * fadeThreshold && elementTop < scrollTop + vh) {
      // 计算可见比例，映射到opacity
      const visibleRatio = Math.min(1, (scrollTop + vh - elementTop) / (vh * (1 - fadeThreshold)));
      $fadeImg.css('opacity', visibleRatio);
    } 
    // 3. 元素完全在视口中：完全显示
    else if (elementTop >= scrollTop + vh * fadeThreshold && elementBottom <= scrollTop + vh) {
      $fadeImg.css('opacity', 1);
    } 
    // 4. 元素滚出视口顶部：淡出
    else if (elementBottom < scrollTop + vh * fadeThreshold) {
      const visibleRatio = Math.max(0, (elementBottom - scrollTop) / (vh * fadeThreshold));
      $fadeImg.css('opacity', visibleRatio);
    }
  });
}, 10));

// 页面加载时先执行一次，初始化状态
$(window).trigger('scroll');

关键改动说明 #

• 防抖函数：避免滚动时频繁触发事件，提升页面性能（可选但建议保留）
• 元素位置完整判断：不仅计算元素顶部，还加入了元素底部位置，覆盖了「完全在视口下→进入视口→完全在视口→滚出视口」的全流程
• 一对一关联元素：用$prefade.next('.fade')确保每个代码块只控制对应的图片，不会出现多个图片同时变化的问题
• 初始化触发：页面加载时自动执行一次滚动逻辑，确保初始状态正确

调整CSS样式 #

需要把.fade的初始透明度改为0，这样页面加载时图片是隐藏的，等待进入视口时淡入：

.fade { 
  position: relative; 
  left:600px; 
  opacity: 0; /* 这里从1改成0 */
  width:600px; 
  z-index: 9;
  transition: opacity 0.3s ease; /* 可选：加入过渡动画让淡入淡出更平滑 */
}

效果说明 #

• 当.prefade代码块从视口下方滚动进入时，图片会随着滚动逐渐从透明变为完全显示
• 当代码块完全在视口中时，图片保持完全显示
• 当代码块滚出视口顶部时，图片逐渐从完全显示变为透明
• 页面加载时，不在视口中的图片会保持隐藏状态

内容的提问来源于stack exchange，提问作者Mr.Rlover