为何使用jQuery实现的淡入淡出效果失效？滚动Div切换异常求助

嘿，我明白你想要实现的是滚动页面时，只有当前对应位置的Div保持完全显示，其他Div都自动淡出（降低透明度），同一时间只展示一个区块的效果。你的现有代码只处理了一个滚动区间，而且没有区分不同的Div，咱们来一步步把它完善好。

核心思路梳理 #

• 监听窗口滚动事件，但要做防抖优化（避免滚动时频繁触发函数，影响性能）
• 计算每个Div的位置，判断哪个Div当前处于「激活」状态（比如进入视口中心区域）
• 给激活的Div添加高亮/淡入效果，给非激活的添加淡出效果

完整实现代码 #

1. HTML结构示例

先准备几个测试用的区块：

<div class="sectionDiv">区块1</div>
<div class="sectionDiv">区块2</div>
<div class="sectionDiv">区块3</div>
<div class="sectionDiv">区块4</div>

2. CSS样式（推荐用CSS过渡，更流畅）

先让每个区块占满视口，同时设置默认透明度和过渡效果：

.sectionDiv {
  height: 100vh; /* 每个区块占满屏幕高度 */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  opacity: 0.3; /* 默认半透明 */
  transition: opacity 0.5s ease; /* 平滑过渡动画 */
  margin: 0;
}

/* 激活状态的样式 */
.sectionDiv.active {
  opacity: 1; /* 完全显示 */
}

3. jQuery逻辑（带防抖优化）

这里用视口中心作为激活判断的基准点，滚动到区块中间时自动切换：

// 防抖函数：限制滚动事件的触发频率，提升性能
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 滚动事件处理
$(window).scroll(debounce(function() {
  const scrollTop = $(window).scrollTop();
  const windowHeight = $(window).height();
  const viewportCenter = scrollTop + windowHeight / 2; // 视口中心位置

  $(".sectionDiv").each(function() {
    const divTop = $(this).offset().top;
    const divBottom = divTop + $(this).outerHeight();

    // 判断视口中心是否落在当前区块内
    const isActive = viewportCenter >= divTop && viewportCenter <= divBottom;

    if (isActive) {
      $(this).addClass("active");
    } else {
      $(this).removeClass("active");
    }
  });
}, 100)); // 100毫秒防抖，可根据需求调整

// 页面加载时初始化状态
$(document).ready(function() {
  $(window).trigger("scroll");
});

如果你更想用jQuery的fade方法 #

如果不想用CSS过渡，也可以直接用fadeTo方法实现：

$(window).scroll(debounce(function() {
  const scrollTop = $(window).scrollTop();
  const windowHeight = $(window).height();
  const viewportCenter = scrollTop + windowHeight / 2;
  let activeDiv = null;

  // 先找到当前激活的区块
  $(".sectionDiv").each(function() {
    const divTop = $(this).offset().top;
    const divBottom = divTop + $(this).outerHeight();
    if (viewportCenter >= divTop && viewportCenter <= divBottom) {
      activeDiv = $(this);
    }
  });

  // 对激活/非激活区块分别处理
  if (activeDiv) {
    $(".sectionDiv").not(activeDiv).fadeTo(500, 0.3);
    activeDiv.fadeTo(500, 1);
  }
}, 100));

注意事项 #

• 如果你区块的高度不是100vh，可以调整激活判断的条件，比如判断区块是否有70%以上进入视口
• 防抖的延迟时间可以根据需求修改，100ms是比较均衡的设置，既不会有明显延迟，又能减少函数触发次数
• 确保所有.sectionDiv的定位是正常的（不要用position: fixed），否则offset().top的计算会出错

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