修复了引导模式内的侧边栏答案

【问题标题】：Fixed sidebar inside a bootstrap modal修复了引导模式内的侧边栏
【发布时间】：2018-02-27 11:17:04
【问题描述】：

当主要内容被向下滚动时，我希望有一个侧边栏固定在顶部。我试过position: fixed 但据我了解它不起作用，因为页面的主体没有被滚动。我也试过摆弄overflow-y，但也没有运气。
左侧是展示我的作品的长图，右侧是带有图片描述的方框。
这是简单的 jsbin 示例：jsbin

【问题讨论】：

将您的元素移到bs 模态之外并给出更高的z-index，使其位于模态的顶部

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

所以首先，我建议更新您的引导程序版本，然后使用引导程序创建所述列。因此，例如您的代码将读取

<div class="bs-example">
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="containter">
            <div class="row">
              <div class="col-12 col-md-8 order-2 order-md-1 modal-left">long img here</div>
              <div class="col-12 col-md-4 order-1 order-md-2 modal-right">this one should stick to the top while scrolling</div>
            </div>
          </div>
        </div>
    </div>
</div>

它的作用是创建一个你所拥有的响应版本。完成此操作后，您可以实现此代码并根据需要进行编辑。

        function sticky_relocate_modal() {
        var window_top = $(window).scrollTop();
        var div_top = $('.modal-content').offset().top;
        if (window_top > div_top) {
            $('.modal-right').addClass('modal-stick');
        } else {
            $('.modal-right').removeClass('modal-stick');
        }
    }

    $(function () {
        if ($(window).width() >= 992) {
            $(window).scroll(sticky_relocate_modal);
            sticky_relocate_modal();
        } else {}
    });

它的作用是检查容器（'.modal-content'）并检查它是否已滚动。滚动后，您可以添加类 '.modal-stick' 此类将具有：

.modal-stick {
position:fixed;
right:0;
}

这与您想要的相比还有很长的路要走，但它创建了一个非常好的代码结构，并使您能够充分利用引导程序的潜力。有关引导程序的说明，请参阅此 documentation。

希望这会有所帮助。如果您需要更多指导，请告诉我，我非常乐意提供帮助。

【讨论】：