实现不同区块图标颜色随滚动切换（仿Elton John官网效果）

问题描述 #

我想要实现像Elton John官网那样，当页面滚动到不同区块内部时（而非仅仅滚动到区块顶部），同步改变社交图标的颜色。目前我写的代码只能在滚动到区块顶部时触发颜色切换，逻辑不符合预期：

jQuery(document).ready(function() { 
  var project1 = jQuery(".section1").offset(); 
  var project2 = jQuery(".section2").offset(); 
  var project3 = jQuery(".section3").offset(); 
  var $window = jQuery(window); 
  $window.scroll(function() { 
    if ( $window.scrollTop() >= project1.top ) { 
      jQuery("a.fa.fa-facebook, a.fa.fa-twitter").removeClass("active2").addClass("active"); 
    } 
    if ( $window.scrollTop() >= project2.top ) { 
      jQuery("a.fa.fa-facebook, a.fa.fa-twitter").removeClass("active").addClass("active2"); 
    } 
    if ( $window.scrollTop() >= project3.top ) { 
      jQuery("a.fa.fa-facebook, a.fa.fa-twitter").removeClass("active2").addClass("active"); 
    } 
  }); 
});

请问怎么修改才能实现官网那种，当区块占据主要视口时就切换图标的效果？

解决方案 #

Hey，我明白你的问题——你现在的代码是滚到区块顶部就换色，但Elton John官网的逻辑是当区块占据视口主要区域时才切换图标颜色，对吧？这核心是判断逻辑的问题，我给你调整一下代码，顺便解释清楚为什么这么改：

jQuery(document).ready(function() {
  // 先把要用到的DOM元素缓存起来，减少重复查找，提升性能
  const $sections = jQuery(".section1, .section2, .section3");
  const $socialIcons = jQuery("a.fa.fa-facebook, a.fa.fa-twitter");
  const $window = jQuery(window);

  // 封装颜色更新逻辑成单独函数，方便复用
  function updateIconColor() {
    // 计算视口的中点位置：滚动距离 + 窗口高度的一半，这个点作为判断"当前主要可见区块"的基准
    const viewportMidpoint = $window.scrollTop() + ($window.height() / 2);

    // 遍历每个区块，找到当前视口中点落在哪个区块里
    $sections.each(function() {
      const $section = jQuery(this);
      const sectionTop = $section.offset().top;
      const sectionBottom = sectionTop + $section.height();

      // 判断：视口中点是否在当前区块的范围内
      if (viewportMidpoint >= sectionTop && viewportMidpoint < sectionBottom) {
        // 根据不同区块切换图标样式
        if ($section.hasClass("section1") || $section.hasClass("section3")) {
          $socialIcons.removeClass("active2").addClass("active");
        } else if ($section.hasClass("section2")) {
          $socialIcons.removeClass("active").addClass("active2");
        }
        // 找到匹配的区块后就停止遍历，不用再检查其他区块了
        return false;
      }
    });
  }

  // 页面加载完成后先执行一次，确保初始状态下图标颜色正确
  updateIconColor();
  // 绑定滚动事件，滚动时更新颜色
  $window.scroll(updateIconColor);
  // 可选：窗口大小改变时也执行，避免窗口resize后判断逻辑出错
  $window.resize(updateIconColor);
});

关键改进点： #

• 用视口中点做判断基准：相比只看区块顶部，视口中点更贴近用户浏览时的视觉焦点——当这个点落在某个区块里，说明这个区块是当前页面的主要可见内容，和官网的效果逻辑一致。
• 计算区块的完整范围：不仅获取区块的顶部位置，还计算了底部位置（顶部+区块高度），确保只有当区块真正占据视口主要区域时才触发颜色切换。
• 性能优化：缓存DOM元素避免重复查找，遍历区块时找到匹配项就停止循环，减少不必要的计算。
• 初始化与resize监听：页面加载时直接设置正确的颜色，窗口大小改变时也重新计算，避免出现异常状态。

额外小提示： #

如果你的区块高度是动态变化的（比如有异步加载的内容），别把区块高度缓存起来，每次执行updateIconColor时再重新计算sectionBottom就好，这样能保证判断逻辑始终准确。

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