如何让jQuery转换代码生成与MooTools一致的div元素顺序？

问题根源 #

你转写的jQuery代码中，custom-menu-placeholder的插入位置错误（大概率用了insertAfter），导致DOM结构和原MooTools版本不一致，进而引发高度样式异常和滚动高亮偏差。原MooTools逻辑是将占位符插入到菜单的紧邻前方，替代菜单脱离文档流后的空间，而非菜单后方。

修正后的完整代码 #

1. jQuery脚本

$(document).ready(function() {
    // 定位目标菜单
    const $menu = $('#custom-menu');
    // 创建占位符元素
    const $placeholder = $('<div class="custom-menu-placeholder"></div>');
    
    // 核心修正：将占位符插入到菜单的紧邻前方，对齐原MooTools DOM结构
    $menu.before($placeholder);
    
    // 初始化占位符高度为菜单初始高度
    $placeholder.height($menu.outerHeight());
    
    // 滚动监听逻辑
    $(window).scroll(function() {
        const scrollTop = $(window).scrollTop();
        const menuOffsetTop = $menu.offset().top;
        
        if (scrollTop > menuOffsetTop) {
            $menu.addClass('sticky');
            // 实时同步占位符与菜单高度（适配菜单动态变化）
            $placeholder.height($menu.outerHeight());
        } else {
            $menu.removeClass('sticky');
            $placeholder.height(0);
        }
    });
    
    // 可选：适配窗口 resize 时的菜单高度变化
    $(window).resize(function() {
        if ($menu.hasClass('sticky')) {
            $placeholder.height($menu.outerHeight());
        }
    });
});

2. 配套CSS样式

确保占位符和粘性菜单的样式正确：

/* 占位符样式：保留原菜单的布局空间 */
.custom-menu-placeholder {
    display: block;
    visibility: hidden;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* 粘性菜单样式：固定到顶部 */
#custom-menu.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    /* 保留原菜单的背景、边框等样式 */
}

关键说明 #

• 用$menu.before($placeholder)替代错误的插入方法，确保占位符与菜单的DOM位置和原MooTools版本完全一致
• 初始化时设置占位符高度，避免滚动触发时的页面闪烁
• 新增窗口resize监听，适配响应式场景下菜单高度的变化

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