求助：窗口Resize时重新计算div高度以适配jQuery Affix偏移

别担心，刚接触JavaScript遇到这种动态场景很正常！你的问题核心是原来的代码只在页面加载时计算了一次高度，但窗口大小变化时，.featured-image和#mainNavPrimary的高度可能会跟着变，导致导航固定的时机不对。我来帮你调整代码，让它能在窗口Resize时自动重新计算高度~

调整思路 #

我们可以把高度计算的逻辑抽成一个可复用的函数，然后在页面加载和窗口Resize时都调用它，同时利用Bootstrap Affix组件的refresh方法来更新偏移量。另外加个防抖处理，避免窗口拖动时频繁触发计算，影响页面性能。

完整代码 #

// 抽离计算偏移量的函数，方便复用
function calculateAffixOffset() {
  return $(".featured-image").outerHeight(true) + $("#mainNavPrimary").outerHeight(true) - 68;
}

// 初始化affix组件
$("#devInpageLinks").affix({
  offset: {
    top: calculateAffixOffset()
  }
});

// 防抖函数：避免窗口Resize时频繁触发计算，优化性能
function debounce(func, delay) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 监听窗口Resize事件，重新计算并更新affix配置
$(window).on('resize', debounce(function() {
  // 更新affix的offset.top值
  $("#devInpageLinks").data('bs.affix').options.offset.top = calculateAffixOffset();
  // 调用refresh方法让组件重新识别新的偏移量
  $("#devInpageLinks").affix('refresh');
}, 250)); // 250ms延迟可根据实际需求调整

关键说明 #

• 抽离函数：把高度计算逻辑单独封装，不管是初始化还是Resize时都能直接调用，避免重复写相同代码。
• 防抖处理：窗口Resize事件会在拖动过程中触发几十次，防抖能让它在停止拖动窗口250ms后再执行计算，减少不必要的性能消耗。
• 刷新affix配置：修改offset值后必须调用refresh方法，让Affix组件重新读取新的偏移参数，确保导航固定的时机准确。

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