如何使用jQuery根据指定div高度动态更新顶部外边距？

首先，你需要确定指定div的选择器（比如给它加个ID #reference-div，或用类名定位），然后在函数里获取这个div的高度，替换掉原来用自身高度计算的逻辑即可。

修改后的代码如下：

updateDivsMargins();
$(window).resize(updateDivsMargins);

// 可选：监听指定div的动态高度变化（如内容加载、展开收起时自动触发更新）
const observer = new MutationObserver(updateDivsMargins);
observer.observe(document.querySelector('#reference-div'), {
  attributes: true,
  childList: true,
  subtree: true
});

function updateDivsMargins() {
    // 获取指定div的高度
    const referenceHeight = $('#reference-div').height();
    $('div.mobile-menu').each(function () {
        $(this).css({
            'margin-top': referenceHeight + 'px' // 显式添加px单位，避免样式兼容问题
        });
    });
}

关键修改说明： #

• 新增const referenceHeight = $('#reference-div').height();，把原逻辑中用当前元素自身高度的部分，替换为目标div的高度
• 显式补充px单位：原代码中jQuery会自动补全单位，但显式书写更清晰，也能避免特殊场景下的样式错误
• 可选添加MutationObserver：如果指定div的高度会因内容变化（比如加载图片、展开菜单）动态改变，仅靠窗口resize事件无法触发更新，这个监听可以自动捕获div的高度变化并执行margin更新

注意事项： #

• 把#reference-div替换为你实际要参考的div选择器（比如类名.header-container，或其他合法的jQuery选择器）
• 如果指定的div有多个，可根据需求调整逻辑：比如为每个mobile-menu对应匹配一个参考div，或统一取第一个参考div的高度

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