Question

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

Answer 1

首先，我建议更新您的bootstrap版本，然后使用bootstrap创建所述cols。例如，您的代码将会读取

<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 {}
    });

这样做是检查容器（＆＃39; .modal-content＆＃39;）并检查它是否已滚动。滚动后，您可以添加课程＆＃39; .modal-stick＆＃39;这堂课将有：

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

它远远超出你想要的范围，但创建了一个很多的代码结构，并使你能够使用bootstrap充分发挥作用。有关bootstrap的说明，请参阅此documentation。

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

修复了bootstrap模式中的侧边栏

1 个答案: