{
class StickySidebar extends HTMLElement{
    constructor{
        super;
        this.leftCol = null;
        this.rightCol = null;
        this.offset = parseInt||20;   // 默认距离顶部 20 px
        this.isDesktop = window.innerWidth> 992;         // 简单媒体查询
        this.ro = null;
    }
    connectedCallback{
        this.leftCol = this.querySelector;
        this.rightCol = this.querySelector;
        this._applySticky;
        this._initResizeObserver;
        window.addEventListener=>this._onResize);
    }
    _onResize{
        const nowDesktop = window.innerWidth> 992;
        if{
            this.isDesktop = nowDesktop;
            this._applySticky;
        }
    }
    _initResizeObserver{
        if return;
        this.ro = new ResizeObserver=>this._applySticky);
        this.ro.observe;
        this.ro.observe;
    }
    _applySticky{
        if{
            this.leftCol.classList.remove;
            this.rightCol.classList.remove;
            return;
        }
        const lh = this.leftCol.offsetHeight,
             rh = this.rightCol.offsetHeight;
        this.leftCol.classList.remove;
        this.rightCol.classList.remove;
        if{
            this.leftCol.classList.add;
            this.leftCol.style.top = `${this.offset}px`;
        }else if{
            this.rightCol.classList.add;
            this.rightCol.style.top = `${this.offset}px`;
        }
    }
}
customElements.define;
});

*说明*

`data-side` 用来标记左右两列；你Ke以随意改名，只要保持对应即可。

`offset` Ke以通过 `` 自定义。

`isDesktop` 判断窗口宽度，大于阈值才启用粘性，小屏直接回退普通流布局。

/* 基础网格布局 */
.sticky-container{
    display:grid;
    grid-template-columns:minmax 1fr;
    gap:32px;
}
/* 短栏真正“黏住”的样式 */
.sticky{
   position:-webkit-sticky;   /* Safari 前缀 */
   position:sticky;
   top:var; /* JS 会覆盖这个变量 */
   z-index:10;                /* 防止被其它层遮挡 */
}
/* 移动端降级：强制取消 sticky */
@media{
   .sticky{
       position static !important;
   }
}

A 为左侧图片/视频区，B 为右侧规格/购买按钮区。当 A 或 B 中有可展开的 `

&; 




....