面板通过内容滚动固定

Question

我正在尝试在 jQuery 和 ajax 中创建动态面板。

我的想法是，当我 select 一个复选框时，执行我的 ajax 和 return 我所有带有 category_id 的项目都有这个复选框。我所有的过程都很好，但我的问题是我希望我的面板标题在我的模式中固定，并且满足于 scroll-y 但我不能这样做。

这是我的代码：

// SET CATEGORY PRODUCT
$(".div-bag").append(`
                    <div class="container-offer-c" style="overflow-y: scroll; overflow-x: hidden; height: 150px; margin-bottom: 20px;">
                        <div class="panel-heading-offer bg-secondary"><span class="ml-3"> ARTICULOS C </span></div>
                    </div>
                `);

// LOOP TO GET ITEMS C
$.each(response[0], function(index, value) {
    $(".container-offer-c").append(`
                        <div class="container-offer-items" >
                            <div class="panel-heading-offer-items row align-items-center mt-2">
                                <div class="col-md-1 ml-2">
                                    <input type="checkbox" class="${ value.id } selectItem" value="${ value.id }">
                                </div>
                                <div class="col-md-2 ml-2">
                                    <span>${ value.codigo }</span>
                                </div>
                                <div class="col-md-4">
                                    <span class="size-font">${ value.nombre }</span>
                                </div>
                                <div class="col-md-2">
                                    
                                </div>
                                <div class="col-md-2">
                                    <input type="number" class="form-control" value="1" style="width: 100%; text-align:center">
                                </div>
                            </div>
                        </div>
                    `)

此代码导致：

但我需要修复我的面板，修复“ARTICULOS C”以及他的内容 scroll-y

感谢阅读我的内容，抱歉我的英语不好

Answer 1

我解决了我添加新 div 的问题：

// SET CATEGORY PRODUCT
                        $(".div-bag").append(`
                                <div class="container-offer-1" style="overflow-y: scroll; overflow-x: hidden; height: 150px; margin-bottom: 20px;">
                                    <div class="panel-heading-offer bg-secondary"><span class="ml-3"> MANTENIMIENTO </span></div>
                                </div>
                                <div class="container-offer-items-secondary-maintenance" style="overflow-y: scroll; overflow-x: hidden;">
                                </div>
                        `);

面板通过内容滚动固定

panel fixed with scroll in content

javascript

jquery

web-frontend