固定位置 - 宽度错误答案

【问题标题】：Fixed position - wrong width固定位置 - 宽度错误
【发布时间】：2020-03-23 11:11:27
【问题描述】：

我是 JS 和 Bootstrap 的初学者。我在我的项目中使用 Bootstrap 4 和 jQuery。

我有这个代码：

<body>
<section id="planner">
    <div class="nav">
        <a href="#" class="active">Konfiguracja planu</a>
        <a href="#">Posiłki</a>
        <a href="#">Raporty</a>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h2>About</h2>
                <p>

                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
                    with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
            </div>

            <div class="col-sm-6">
                <h2 class="cow">qwerty</h2>
                <div class="tableBox">
                    <br/><br/><br/><br/><br/><br/>
                    <div id="stick-here"></div>
                    <div id="stickThis">
                        <div id="accordion">
                            <div class="card">
                                <div class="card-header" id="headingOne">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
                                                aria-expanded="true" aria-controls="collapseOne">
                                            Collapsible Group Item #1
                                        </button>
                                    </h5>
                                </div>

                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                     data-parent="#accordion">
                                    <div class="card-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                                        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
                                        brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                                        sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                                        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                                        Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
                                        you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header" id="headingTwo">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                                data-target="#collapseTwo" aria-expanded="false"
                                                aria-controls="collapseTwo">
                                            Collapsible Group Item #2
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                     data-parent="#accordion">
                                    <div class="card-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                                        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
                                        brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                                        sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                                        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                                        Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
                                        you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header" id="headingThree">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-toggle="collapse"
                                                data-target="#collapseThree" aria-expanded="false"
                                                aria-controls="collapseThree">
                                            Collapsible Group Item #3
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                     data-parent="#accordion">
                                    <div class="card-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                                        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
                                        brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                                        sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                                        shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                                        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                                        Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
                                        you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"
        integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P"
        crossorigin="anonymous"></script>

<script>
    function sticktothetop() {
        var window_top = $(window).scrollTop();
        var top = $('#stick-here').offset().top;
        if (window_top > top) {
            $('#stickThis').addClass('stick');
            $('#stick-here').height($('#stickThis').outerHeight());
        } else {
            $('#stickThis').removeClass('stick');
            $('#stick-here').height(0);
        }
    }

    $(function () {
        $(window).scroll(sticktothetop);
        sticktothetop();
    });
</script>
</body>
</html>

权限：http://serwer1356363.home.pl/pub/_demo/

当我向下移动屏幕时 - 在右侧，组件手风琴“粘”在屏幕顶部。这是对的。问题是这个手风琴从它的列中出来（它变得太宽了）。如何解决？

【问题讨论】：

您正在更改您的网页很多创建一个代码框，我可以从那里控制它，否则我无法测试它
对不起。我刷新我的代码：serwer1356363.home.pl/pub/_demo
jsbin.com在这里上传你的html和css，点击ctrl +s把链接发给我
jsbin.com/fobiyajunu/edit?html,css,js,output

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案1】：

您可以更改以下 css 规则：

#stickThis.stick {
    position: sticky; /* instead of fixed*/
}

【讨论】：

【解决方案2】：

您可以在添加粘性类的同时使用javascript根据其父宽度将宽度设置为#stickThis。

例如：

$parentWidth = $('#stickThis').closest('.tableBox').innerWidth();
$('#stickThis').width($parentWidth);

完整代码：

function sticktothetop() {
    var window_top = $(window).scrollTop();
    var top = $('#stick-here').offset().top;
    if (window_top > top) {
        $('#stickThis').addClass('stick');
        setWidth();
        $('#stick-here').height($('#stickThis').outerHeight());
    } else {
        $('#stickThis').width('auto');
        $('#stickThis').removeClass('stick');
        $('#stick-here').height(0);
    }
}

$(function() {
    $(window).scroll(sticktothetop);
    sticktothetop();
});

function setWidth() {
    if ($('#stickThis').hasClass('stick')) {
        $parentWidth = $('#stickThis').closest('.tableBox').innerWidth();
        $('#stickThis').width($parentWidth);
    }
}

$(window).resize(function() {
    setWidth();
});

您还应该在窗口调整大小时调用setWidth 函数来固定元素的宽度。

【讨论】：

在您的示例中测试jsbin.com/fobiyajunu/edit?html,css,js,output